<!DOCTYPE html>
<html lang="en">

<head>
    <title>Datta Able - Most Complete Bootstrap Admin Template</title>
    <!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 10]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
    <meta name="keywords" content="admin templates, bootstrap admin templates, bootstrap 4, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, datta able, datta able bootstrap admin template">
    <meta name="author" content="Codedthemes" />

    <!-- Favicon icon -->
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    <!-- fontawesome icon -->
    <link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">

    <!-- ======================= -->
    <!-- ======= PLUGIN CSS ===== -->
    <!-- ======================= -->

    <!-- animation css -->
    <link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
    <!-- prism css -->
    <link rel="stylesheet" href="assets/plugins/prism/css/prism.min.css">
    <!-- bootstrap-tagsinput-latest css -->
    <link rel="stylesheet" href="assets/plugins/bootstrap-tagsinput-latest/css/bootstrap-tagsinput.css">
    <!-- Smart Wizard css -->
    <link rel="stylesheet" href="assets/plugins/smart-wizard/css/smart_wizard.min.css">
    <link rel="stylesheet" href="assets/plugins/smart-wizard/css/smart_wizard_theme_arrows.min.css">
    <link rel="stylesheet" href="assets/plugins/smart-wizard/css/smart_wizard_theme_circles.min.css">
    <link rel="stylesheet" href="assets/plugins/smart-wizard/css/smart_wizard_theme_dots.min.css">
    <!-- material datetimepicker css -->
    <link rel="stylesheet" href="assets/plugins/material-datetimepicker/css/bootstrap-material-datetimepicker.css">
    <!-- Bootstrap datetimepicker css -->
    <link href="assets/plugins/bootstrap-datetimepicker/css/prettify.css.html" rel="stylesheet">
    <link href="assets/plugins/bootstrap-datetimepicker/css/docs.css.html" rel="stylesheet">
    <link rel="stylesheet" href="assets/plugins/bootstrap-datetimepicker/css/bootstrap-datepicker3.min.css">
    <link rel="stylesheet" href="assets/fonts/material/css/materialdesignicons.min.css">
    <!-- minicolors css -->
    <link rel="stylesheet" href="assets/plugins/mini-color/css/jquery.minicolors.css">
    <!-- select2 css -->
    <link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
    <!-- multi-select css -->
    <link rel="stylesheet" href="assets/plugins/multi-select/css/multi-select.css">
    <!-- vendor css -->
    <link rel="stylesheet" href="assets/css/style.css">

    <style>pre[class*=language-]:after, pre[class*=language-]:before{
        display: none;
        }
        .docs-page-header {
        	font-weight: 400;
        	font-size: 27px;
        	margin: 0;
        	padding: 15px 50px;
        	line-height:40px;
        	height: 70px;
        }
        .docs-page-header.bg-dark {
            background-color: rgb(63, 77, 103) !important;
        }

        .docs-header-path {
        	opacity: 1;
        }
        .docs-wrapper {
        	min-height: calc(100vh - 70px);
        	position: relative;
        }

        .docs-inner {
        	padding: 40px;
        }

        .docs-sections {
        	position: fixed;
        	top: 70px;
        	left: 0;
        	bottom: 0;
        	overflow: hidden;
        }

        .docs-sections-inner {
        	padding-top: 32px;
        	padding-left: 32px;
        	padding-right:32px;
        	margin: 0;
        }

        .docs-sections-inner>li:first-child {
        	padding-top: 0 !important;
        }

        .docs-sections-inner li {
        	list-style: none;
        	padding: 5px 0;
        	margin: 0;
        	font-size:14px;
        }

        .docs-sections,
        .docs-sections a,
        .docs-sections a:focus,
        .docs-sections a:active {
        	color: #6c757d;
        	line-height: 1.3;
            padding: 0;
        }

        .docs-sections a:hover {
        	color: #333;
            position:relative;
        }

        .docs-sections a.active {
        	color: #333;
        	font-weight: bold;
            position:relative;
        }
        .docs-sections a.active:before , .docs-sections a:hover:before {
            content: "";
            position: absolute;
            width: 5px;
            height: 5px;
            background: #000;
            border-radius: 50%;
            top: 8px;
            left: -15px;
        }

        .docs-page-header,
        .docs-wrapper {
        	min-width: 1200px;
        }

        .docs-sections {
        	width: 230px;
            background: rgba(63, 77, 103, 0.05);
        }

        .docs-wrapper {
        	padding-left: 230px;
        }

        h2.docs-header {
        	margin-bottom:32px;
        	font-size: 24px;
        	position: relative;
        }

        h2.docs-header~h2.docs-header {
        	margin-top: 50px;
        }
    </style>

    <!--  <link rel="stylesheet" class="rtl-css" href="assets/css/layouts/rtl.css"> -->

    <!-- ======================= -->
    <!-- ======= PLUGIN JS ===== -->
    <!-- ======================= -->

    <script src="assets/js/vendor-all.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- highlight.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script src="assets/plugins/clipboard/js/clipboard.js"></script>
    <!-- prism Js -->
    <script src="assets/plugins/prism/js/prism.min.js"></script>
    <!-- bootstrap-tagsinput-latest Js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script src="assets/plugins/bootstrap-tagsinput-latest/js/bootstrap-tagsinput.min.js"></script>
    <!-- bootstrap-maxlength Js -->
    <script src="assets/plugins/bootstrap-maxlength/js/bootstrap-maxlength.min.js"></script>
    <!-- jquery-validation Js -->
    <script src="assets/plugins/jquery-validation/js/jquery.validate.min.js"></script>
    <!-- Input mask Js -->
    <script src="assets/plugins/inputmask/js/inputmask.min.js"></script>
    <script src="assets/plugins/inputmask/js/jquery.inputmask.min.js"></script>
    <script src="assets/plugins/inputmask/js/autoNumeric.js"></script>
    <!-- wizard Js -->
    <script src="assets/plugins/wizard/js/jquery.bootstrap.js.html"></script>
    <script src="assets/plugins/smart-wizard/js/jquery.smartWizard.min.js"></script>
    <!-- material datetimepicker Js -->
    <script src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
    <script src="assets/plugins/material-datetimepicker/js/bootstrap-material-datetimepicker.js"></script>
    <!-- minicolors Js -->
    <script src="assets/plugins/mini-color/js/jquery.minicolors.min.js"></script>
    <!-- select2 Js -->
    <script src="assets/plugins/select2/js/select2.full.min.js"></script>
    <!-- multi-select Js -->
    <script src="assets/plugins/multi-select/js/jquery.quicksearch.js"></script>
    <script src="assets/plugins/multi-select/js/jquery.multi-select.js"></script>

</head>

<body>
    <h2 class="docs-page-header bg-dark text-white">
        <span class="docs-header-path">Form Components</span>
    </h2>
    <div class="docs-wrapper">
        <div class="docs-sections">
            <ul class="docs-sections-inner">
                <li class="nav-item"><a class="nav-link active" href="#page-element">Basic Componant</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-input">Input Group</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-switches">Switches</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-radio">Radio button</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-checkbox">Checkbox</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-bootstrap">Bootstrap Tags</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-maxlength">Bootstrap maxlength</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-validation">Validation</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-masking">Masking</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-wizard">Wizard</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-datepicker">Material Datetimepicker</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-colorpicker">Color picker</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-select">Select</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-multiselect">Multi select</a></li>

            </ul>
        </div>
        <div class="docs-inner">
            <h2 class="docs-header" id="page-element">Basic Componant</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Componant</h5>
                        </div>
                        <div class="card-body">
                            <h5>Form controls</h5>
                            <hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <form>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Email address</label>
                                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                                            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">Password</label>
                                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                        </div>
                                        <div class="form-group form-check">
                                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                            <label class="form-check-label" for="exampleCheck1">Check me out</label>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </form>
                                </div>
                                <div class="col-md-6">
                                    <form>
                                        <div class="form-group">
                                            <label>Text</label>
                                            <input type="text" class="form-control" placeholder="Text">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleFormControlSelect1">Example select</label>
                                            <select class="form-control" id="exampleFormControlSelect1">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleFormControlTextarea1">Example textarea</label>
                                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <h5 class="mt-5">Sizing</h5>
                            <hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <input class="mb-3 form-control form-control-lg" type="text" placeholder=".form-control-lg">
                                    <input class="mb-3 form-control" type="text" placeholder="Default input">
                                    <input class="mb-3 form-control form-control-sm" type="text" placeholder=".form-control-sm">
                                </div>
                                <div class="col-md-6">
                                    <select class="mb-3 form-control form-control-lg">
                                        <option>Large select</option>
                                    </select>
                                    <select class="mb-3 form-control">
                                        <option>Default select</option>
                                    </select>
                                </div>
                            </div>
                            <h5 class="mt-5">Range Inputs</h5>
                            <hr>
                            <form>
                                <div class="form-group">
                                    <label for="formControlRange">Example Range input</label>
                                    <input type="range" class="form-control-range" id="formControlRange">
                                </div>
                            </form>
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="mt-5">Readonly</h5>
                                    <hr>
                                    <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-5">Readonly plain Text</h5>
                                    <hr>
                                    <form>
                                        <div class="form-group row">
                                            <label for="staticEmail" class="col-sm-3 col-form-label">Email</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="inputPassword" class="col-sm-3 col-form-label">Password</label>
                                            <div class="col-sm-9">
                                                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <h5 class="mt-5">Inline</h5>
                            <hr>
                            <form class="form-inline">
                                <div class="form-group mb-2">
                                    <label for="staticEmail2" class="sr-only">Email</label>
                                    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                    <label for="inputPassword2" class="sr-only">Password</label>
                                    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
                                </div>
                                <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
                            </form>
                            <h5 class="mt-5">Form Grid</h5>
                            <hr>
                            <form>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="inputEmail4">Email</label>
                                        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="inputPassword4">Password</label>
                                        <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputAddress">Address</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                                </div>
                                <div class="form-group">
                                    <label for="inputAddress2">Address 2</label>
                                    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="inputCity">City</label>
                                        <input type="text" class="form-control" id="inputCity">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="inputState">State</label>
                                        <select id="inputState" class="form-control">
                                            <option selected>select</option>
                                            <option>Large select</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label for="inputZip">Zip</label>
                                        <input type="text" class="form-control" id="inputZip">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="gridCheck">
                                        <label class="form-check-label" for="gridCheck">Check me out</label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">Sign in</button>
                            </form>
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="mt-5">Horizontal Form</h5>
                                    <hr>
                                    <form>
                                        <div class="form-group row">
                                            <label for="inputEmail3" class="col-sm-3 col-form-label">Email</label>
                                            <div class="col-sm-9">
                                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="inputPassword3" class="col-sm-3 col-form-label">Password</label>
                                            <div class="col-sm-9">
                                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                                            </div>
                                        </div>
                                        <fieldset class="form-group">
                                            <div class="row">
                                                <label for="inputPassword3" class="col-sm-3 col-form-label">Radios</label>
                                                <div class="col-sm-9">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
                                                        <label class="form-check-label" for="gridRadios1">First radio</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                                                        <label class="form-check-label" for="gridRadios2">Second radio</label>
                                                    </div>
                                                    <div class="form-check disabled">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
                                                        <label class="form-check-label" for="gridRadios3">Third disabled radio</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="form-group row">
                                            <div class="col-sm-3">Checkbox</div>
                                            <div class="col-sm-9">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="gridCheck1">
                                                    <label class="form-check-label" for="gridCheck1">Example checkbox</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-sm-10">
                                                <button type="submit" class="btn btn-primary">Sign in</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-5">Horizontal Form Label Sizing</h5>
                                    <hr>
                                    <form>
                                        <div class="form-group row">
                                            <label for="colFormLabelSm" class="col-sm-3 col-form-label col-form-label-sm">Email</label>
                                            <div class="col-sm-9">
                                                <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="colFormLabel" class="col-sm-3 col-form-label">Email</label>
                                            <div class="col-sm-9">
                                                <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="colFormLabelLg" class="col-sm-3 col-form-label col-form-label-lg">Email</label>
                                            <div class="col-sm-9">
                                                <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <h5 class="mt-5">Help Text</h5>
                            <hr>
                            <label for="inputPassword5">Password</label>
                            <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
                            <small id="passwordHelpBlock" class="form-text text-muted">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
                            <form class="form-inline">
                                <div class="form-group mt-3">
                                    <label for="inputPassword6">Password</label>
                                    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
                                    <small id="passwordHelpInline" class="text-muted">Must be 8-20 characters long.</small>
                                </div>
                            </form>
                            <h5 class="mt-5">Validation</h5>
                            <hr>
                            <form class="needs-validation" novalidate>
                                <div class="form-row">
                                    <div class="col-md-4 mb-3">
                                        <label for="validationCustom01">First name</label>
                                        <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="validationCustom02">Last name</label>
                                        <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="validationCustomUsername">Username</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="inputGroupPrepend">@</span>
                                            </div>
                                            <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
                                            <div class="invalid-feedback">
                                                Please choose a username.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-md-6 mb-3">
                                        <label for="validationCustom03">City</label>
                                        <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
                                        <div class="invalid-feedback">
                                            Please provide a valid city.
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label for="validationCustom04">State</label>
                                        <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
                                        <div class="invalid-feedback">
                                            Please provide a valid state.
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label for="validationCustom05">Zip</label>
                                        <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
                                        <div class="invalid-feedback">
                                            Please provide a valid zip.
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                                        <label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>
                                        <div class="invalid-feedback">
                                            You must agree before submitting.
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-primary" type="submit">Submit form</button>
                            </form>
                            <script>
                                // Example starter JavaScript for disabling form submissions if there are invalid fields
                                (function() {
                                    window.addEventListener('load', function() {
                                        // Fetch all the forms we want to apply custom Bootstrap validation styles to
                                        var forms = document.getElementsByClassName('needs-validation');
                                        // Loop over them and prevent submission
                                        var validation = Array.prototype.filter.call(forms, function(form) {
                                            form.addEventListener('submit', function(event) {
                                                if (form.checkValidity() === false) {
                                                    event.preventDefault();
                                                    event.stopPropagation();
                                                }
                                                form.classList.add('was-validated');
                                            }, false);
                                        });
                                    }, false);
                                })();
                            </script>
                            <h5 class="mt-5">Supported Elements</h5>
                            <hr>
                            <form class="was-validated">
                                <div class="custom-control custom-checkbox mb-3">
                                    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
                                    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
                                    <div class="invalid-feedback">Example invalid feedback text</div>
                                </div>

                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
                                    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
                                </div>
                                <div class="custom-control custom-radio mb-3">
                                    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
                                    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
                                    <div class="invalid-feedback">More example invalid feedback text</div>
                                </div>

                                <div class="form-group">
                                    <select class="custom-select" required>
                                        <option value="">Open this select menu</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                    <div class="invalid-feedback">Example invalid custom select feedback</div>
                                </div>

                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
                                    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
                                    <div class="invalid-feedback">Example invalid custom file feedback</div>
                                </div>
                            </form>
                            <h5 class="mt-5">Tooltips</h5>
                            <hr>
                            <form class="needs-validation" novalidate>
                                <div class="form-row">
                                    <div class="col-md-4 mb-3">
                                        <label for="validationTooltip01">First name</label>
                                        <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
                                        <div class="valid-tooltip">
                                            Looks good!
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="validationTooltip02">Last name</label>
                                        <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
                                        <div class="valid-tooltip">
                                            Looks good!
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="validationTooltipUsername">Username</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
                                            </div>
                                            <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
                                            <div class="invalid-tooltip">
                                                Please choose a unique and valid username.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-md-6 mb-3">
                                        <label for="validationTooltip03">City</label>
                                        <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
                                        <div class="invalid-tooltip">
                                            Please provide a valid city.
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label for="validationTooltip04">State</label>
                                        <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
                                        <div class="invalid-tooltip">
                                            Please provide a valid state.
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label for="validationTooltip05">Zip</label>
                                        <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
                                        <div class="invalid-tooltip">
                                            Please provide a valid zip.
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-primary" type="submit">Submit form</button>
                            </form>
                            <h3 class="mt-5">Checkboxes and Radios</h3>
                            <h5 class="mt-3">Checkboxes</h5>
                            <hr>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="customCheck1">
                                <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="mt-5">Radios</h5>
                                    <hr>
                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
                                    </div>
                                    <h5 class="mt-5">Inline</h5>
                                    <hr>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-5">Range</h5>
                                    <hr>
                                    <label for="customRange1">Example range</label>
                                    <input type="range" class="custom-range" id="customRange1">
                                    <label for="customRange2">Example range</label>
                                    <input type="range" class="custom-range" min="0" max="5" id="customRange2">
                                    <label for="customRange3">Example range</label>
                                    <input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-input">Input Group</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Input Group</h5>
                        </div>
                        <div class="card-body">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon1">@</span>
                                </div>
                                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                            </div>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <span class="input-group-text" id="basic-addon2">@example.com</span>
                                </div>
                            </div>
                            <label for="basic-url">Your vanity URL</label>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
                                </div>
                                <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
                            </div>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">$</span>
                                </div>
                                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                                <div class="input-group-append">
                                    <span class="input-group-text">.00</span>
                                </div>
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">With textarea</span>
                                </div>
                                <textarea class="form-control" aria-label="With textarea"></textarea>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="mt-5">Sizing</h5>
                                    <hr>
                                    <div class="input-group input-group-sm mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
                                        </div>
                                        <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                                    </div>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
                                        </div>
                                        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
                                    </div>
                                    <div class="input-group input-group-lg">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
                                        </div>
                                        <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-5">Checkboxes and radios</h5>
                                    <hr>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="checkbox" aria-label="Checkbox for following text input">
                                            </div>
                                        </div>
                                        <input type="text" class="form-control" aria-label="Text input with checkbox">
                                    </div>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="radio" aria-label="Radio button for following text input">
                                            </div>
                                        </div>
                                        <input type="text" class="form-control" aria-label="Text input with radio button">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-5">Multiple inputs</h5>
                                    <hr>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">First and last name</span>
                                        </div>
                                        <input type="text" class="form-control">
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-5">Multiple addons</h5>
                                    <hr>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                            <span class="input-group-text">0.00</span>
                                        </div>
                                        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                                    </div>
                                    <div class="input-group">
                                        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                                        <div class="input-group-append">
                                            <span class="input-group-text">$</span>
                                            <span class="input-group-text">0.00</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h5 class="mt-5">Button Addons</h5>
                            <hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-primary" type="button">Button</button>
                                        </div>
                                        <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
                                    </div>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button">Button</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-primary" type="button">Button</button>
                                            <button class="btn btn-secondary" type="button">Button</button>
                                        </div>
                                        <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
                                    </div>
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
                                        <div class="input-group-append">
                                            <button class="btn btn-secondary" type="button">Button</button>
                                            <button class="btn btn-primary" type="button">Button</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-5">Buttons With Dropdowns</h5>
                                    <hr>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#!">Action</a>
                                                <a class="dropdown-item" href="#!">Another action</a>
                                                <a class="dropdown-item" href="#!">Something else here</a>
                                                <div role="separator" class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#!">Separated link</a>
                                            </div>
                                        </div>
                                        <input type="text" class="form-control" aria-label="Text input with dropdown button">
                                    </div>
                                    <div class="input-group">
                                        <input type="text" class="form-control" aria-label="Text input with dropdown button">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#!">Action</a>
                                                <a class="dropdown-item" href="#!">Another action</a>
                                                <a class="dropdown-item" href="#!">Something else here</a>
                                                <div role="separator" class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#!">Separated link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-5">Segmented Buttons</h5>
                                    <hr>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <button type="button" class="btn btn-secondary">Action</button>
                                            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#!">Action</a>
                                                <a class="dropdown-item" href="#!">Another action</a>
                                                <a class="dropdown-item" href="#!">Something else here</a>
                                                <div role="separator" class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#!">Separated link</a>
                                            </div>
                                        </div>
                                        <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
                                    </div>
                                    <div class="input-group">
                                        <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-secondary">Action</button>
                                            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#!">Action</a>
                                                <a class="dropdown-item" href="#!">Another action</a>
                                                <a class="dropdown-item" href="#!">Something else here</a>
                                                <div role="separator" class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#!">Separated link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h3 class="mt-5">Custom Forms</h3>
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="mt-3">Custom Select</h5>
                                    <hr>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <label class="input-group-text" for="inputGroupSelect01">Options</label>
                                        </div>
                                        <select class="custom-select" id="inputGroupSelect01">
                                            <option selected>Choose...</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div>
                                    <div class="input-group mb-3">
                                        <select class="custom-select" id="inputGroupSelect02">
                                            <option selected>Choose...</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                        <div class="input-group-append">
                                            <label class="input-group-text" for="inputGroupSelect02">Options</label>
                                        </div>
                                    </div>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-primary" type="button">Button</button>
                                        </div>
                                        <select class="custom-select" id="inputGroupSelect03">
                                            <option selected>Choose...</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div>
                                    <div class="input-group">
                                        <select class="custom-select" id="inputGroupSelect04">
                                            <option selected>Choose...</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button">Button</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mt-3">Custom File Input</h5>
                                    <hr>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Upload</span>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="inputGroupFile01">
                                            <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                                        </div>
                                    </div>
                                    <div class="input-group mb-3">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="inputGroupFile02">
                                            <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
                                        </div>
                                        <div class="input-group-append">
                                            <span class="input-group-text">Upload</span>
                                        </div>
                                    </div>
                                    <div class="input-group cust-file-button mb-3">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-primary" type="button">Button</button>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="inputGroupFile03">
                                            <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
                                        </div>
                                    </div>
                                    <div class="input-group cust-file-button">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="inputGroupFile04">
                                            <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button">Button</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Button Badges</h5>
                        </div>
                        <div class="card-body">
                            <button type="button" class="btn btn-primary">primary <span class="badge badge-light">4</span></button>
                            <button type="button" class="btn btn-secondary">secondary <span class="badge badge-light">4</span></button>
                            <button type="button" class="btn btn-success">success <span class="badge badge-light">4</span></button>
                            <button type="button" class="btn btn-danger">danger <span class="badge badge-light">4</span></button>
                            <button type="button" class="btn btn-warning">warning <span class="badge badge-light">4</span></button>
                            <button type="button" class="btn btn-info">info <span class="badge badge-light">4</span></button>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-switches">Switches</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Switches</h5>
                            <span class="d-block m-t-5">Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-xl-3 col-md-6 mb-4">
                                    <h5>Default Switch</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="switch d-inline m-r-10">
                                            <input type="checkbox" id="switch-1" checked>
                                            <label for="switch-1" class="cr"></label>
                                        </div>
                                        <label>Checked</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch d-inline m-r-10">
                                            <input type="checkbox" id="switch-2">
                                            <label for="switch-2" class="cr"></label>
                                        </div>
                                        <label>Uncheck</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch d-inline m-r-10">
                                            <input type="checkbox" id="switch-3" disabled>
                                            <label for="switch-3" class="cr"></label>
                                        </div>
                                        <label>Disabled</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch d-inline m-r-10">
                                            <input type="checkbox" id="switch-4" disabled checked>
                                            <label for="switch-4" class="cr"></label>
                                        </div>
                                        <label>Disabled Checked</label>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-md-6 mb-4">
                                    <h5>Alternative Switch</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="switch switch-alternative d-inline m-r-10">
                                            <input type="checkbox" id="switch-a-1" checked>
                                            <label for="switch-a-1" class="cr"></label>
                                        </div>
                                        <label>Checked</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-alternative d-inline m-r-10">
                                            <input type="checkbox" id="switch-a-2">
                                            <label for="switch-a-2" class="cr"></label>
                                        </div>
                                        <label>Uncheck</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-alternative d-inline m-r-10">
                                            <input type="checkbox" id="switch-a-3" disabled>
                                            <label for="switch-a-3" class="cr"></label>
                                        </div>
                                        <label>Disabled</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-alternative d-inline m-r-10">
                                            <input type="checkbox" id="switch-a-4" disabled checked>
                                            <label for="switch-a-4" class="cr"></label>
                                        </div>
                                        <label>Disabled Checked</label>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-md-6 mb-4">
                                    <h5>Primary Switch</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="switch switch-primary d-inline m-r-10">
                                            <input type="checkbox" id="switch-p-1" checked>
                                            <label for="switch-p-1" class="cr"></label>
                                        </div>
                                        <label>Checked</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-primary d-inline m-r-10">
                                            <input type="checkbox" id="switch-p-2">
                                            <label for="switch-p-2" class="cr"></label>
                                        </div>
                                        <label>Uncheck</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-primary d-inline m-r-10">
                                            <input type="checkbox" id="switch-p-3" disabled>
                                            <label for="switch-p-3" class="cr"></label>
                                        </div>
                                        <label>Disabled</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-primary d-inline m-r-10">
                                            <input type="checkbox" id="switch-p-4" disabled checked>
                                            <label for="switch-p-4" class="cr"></label>
                                        </div>
                                        <label>Disabled Checked</label>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-md-6 mb-4">
                                    <h5>Danger Switch</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="switch switch-danger d-inline m-r-10">
                                            <input type="checkbox" id="switch-d-1" checked>
                                            <label for="switch-d-1" class="cr"></label>
                                        </div>
                                        <label>Checked</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-danger d-inline m-r-10">
                                            <input type="checkbox" id="switch-d-2">
                                            <label for="switch-d-2" class="cr"></label>
                                        </div>
                                        <label>Uncheck</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-danger d-inline m-r-10">
                                            <input type="checkbox" id="switch-d-3" disabled>
                                            <label for="switch-d-3" class="cr"></label>
                                        </div>
                                        <label>Disabled</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-danger d-inline m-r-10">
                                            <input type="checkbox" id="switch-d-4" disabled checked>
                                            <label for="switch-d-4" class="cr"></label>
                                        </div>
                                        <label>Disabled Checked</label>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-md-6 mb-4">
                                    <h5>Success Switch</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="switch switch-success d-inline m-r-10">
                                            <input type="checkbox" id="switch-s-1" checked>
                                            <label for="switch-s-1" class="cr"></label>
                                        </div>
                                        <label>Checked</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-success d-inline m-r-10">
                                            <input type="checkbox" id="switch-s-2">
                                            <label for="switch-s-2" class="cr"></label>
                                        </div>
                                        <label>Uncheck</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-success d-inline m-r-10">
                                            <input type="checkbox" id="switch-s-3" disabled>
                                            <label for="switch-s-3" class="cr"></label>
                                        </div>
                                        <label>Disabled</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-success d-inline m-r-10">
                                            <input type="checkbox" id="switch-s-4" disabled checked>
                                            <label for="switch-s-4" class="cr"></label>
                                        </div>
                                        <label>Disabled Checked</label>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <h5>Warning Switch</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="switch switch-warning d-inline m-r-10">
                                            <input type="checkbox" id="switch-w-1" checked>
                                            <label for="switch-w-1" class="cr"></label>
                                        </div>
                                        <label>Checked</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-warning d-inline m-r-10">
                                            <input type="checkbox" id="switch-w-2">
                                            <label for="switch-w-2" class="cr"></label>
                                        </div>
                                        <label>Uncheck</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-warning d-inline m-r-10">
                                            <input type="checkbox" id="switch-w-3" disabled>
                                            <label for="switch-w-3" class="cr"></label>
                                        </div>
                                        <label>Disabled</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-warning d-inline m-r-10">
                                            <input type="checkbox" id="switch-w-4" disabled checked>
                                            <label for="switch-w-4" class="cr"></label>
                                        </div>
                                        <label>Disabled Checked</label>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-md-6 mb-3">
                                    <h5>Info Switch</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="switch switch-info d-inline m-r-10">
                                            <input type="checkbox" id="switch-i-1" checked>
                                            <label for="switch-i-1" class="cr"></label>
                                        </div>
                                        <label>Checked</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-info d-inline m-r-10">
                                            <input type="checkbox" id="switch-i-2">
                                            <label for="switch-i-2" class="cr"></label>
                                        </div>
                                        <label>Uncheck</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-info d-inline m-r-10">
                                            <input type="checkbox" id="switch-i-3" disabled>
                                            <label for="switch-i-3" class="cr"></label>
                                        </div>
                                        <label>Disabled</label>
                                    </div>
                                    <div class="form-group">
                                        <div class="switch switch-info d-inline m-r-10">
                                            <input type="checkbox" id="switch-i-4" disabled checked>
                                            <label for="switch-i-4" class="cr"></label>
                                        </div>
                                        <label>Disabled Checked</label>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Outline</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-outline-primary" title="btn btn-outline-primary" data-toggle="tooltip">Primary</button>
                            <button type="button" class="btn btn-outline-secondary" title="btn btn-outline-secondary" data-toggle="tooltip">Secondary</button>
                            <button type="button" class="btn btn-outline-success" title="btn btn-outline-success" data-toggle="tooltip">Success</button>
                            <button type="button" class="btn btn-outline-danger" title="btn btn-outline-danger" data-toggle="tooltip">Danger</button>
                            <button type="button" class="btn btn-outline-warning" title="btn btn-outline-warning" data-toggle="tooltip">Warning</button>
                            <button type="button" class="btn btn-outline-info" title="btn btn-outline-info" data-toggle="tooltip">Info</button>
                            <button type="button" class="btn btn-outline-light" title="btn btn-outline-light" data-toggle="tooltip">Light</button>
                            <button type="button" class="btn btn-outline-dark" title="btn btn-outline-dark" data-toggle="tooltip">Dark</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Square Button</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.btn-square</code> in class <code>.btn</code> class to get square button</p>
                            <button type="button" class="btn btn-square btn-primary">Primary</button>
                            <button type="button" class="btn btn-square btn-secondary">Secondary</button>
                            <button type="button" class="btn btn-square btn-success">Success</button>
                            <button type="button" class="btn btn-square btn-danger">Danger</button>
                            <button type="button" class="btn btn-square btn-warning">Warning</button>
                            <button type="button" class="btn btn-square btn-info">Info</button>
                            <button type="button" class="btn btn-square btn-light">Light</button>
                            <button type="button" class="btn btn-square btn-dark">Dark</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Disabled Button</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.disabled</code> in class <code>.btn</code> class to get Disabled button</p>
                            <button type="button" class="btn disabled btn-primary">Primary</button>
                            <button type="button" class="btn disabled btn-secondary">Secondary</button>
                            <button type="button" class="btn disabled btn-success">Success</button>
                            <button type="button" class="btn disabled btn-danger">Danger</button>
                            <button type="button" class="btn disabled btn-warning">Warning</button>
                            <button type="button" class="btn disabled btn-info">Info</button>
                            <button type="button" class="btn disabled btn-light">Light</button>
                            <button type="button" class="btn disabled btn-dark">Dark</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Rounded Button</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.btn-rounded</code> in class <code>.btn</code> class to get Rounded button</p>
                            <button type="button" class="btn btn-rounded btn-primary">Primary</button>
                            <button type="button" class="btn btn-rounded btn-secondary">Secondary</button>
                            <button type="button" class="btn btn-rounded btn-success">Success</button>
                            <button type="button" class="btn btn-rounded btn-danger">Danger</button>
                            <button type="button" class="btn btn-rounded btn-warning">Warning</button>
                            <button type="button" class="btn btn-rounded btn-info">Info</button>
                            <button type="button" class="btn btn-rounded btn-light">Light</button>
                            <button type="button" class="btn btn-rounded btn-dark">Dark</button>
                            <hr>
                            <p>use <code>.btn-rounded</code> in class <code>.btn-outline-8</code> class to get Rounded Outline button</p>
                            <button type="button" class="btn btn-rounded btn-outline-primary">Primary</button>
                            <button type="button" class="btn btn-rounded btn-outline-secondary">Secondary</button>
                            <button type="button" class="btn btn-rounded btn-outline-success">Success</button>
                            <button type="button" class="btn btn-rounded btn-outline-danger">Danger</button>
                            <button type="button" class="btn btn-rounded btn-outline-warning">Warning</button>
                            <button type="button" class="btn btn-rounded btn-outline-info">Info</button>
                            <button type="button" class="btn btn-rounded btn-outline-light">Light</button>
                            <button type="button" class="btn btn-rounded btn-outline-dark">Dark</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Glow Button</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.btn-glow</code> in class <code>.btn</code> class to get Glow button</p>
                            <button type="button" class="btn btn-glow-primary btn-primary" title="btn btn-glow-primary btn-primary" data-toggle="tooltip">Primary</button>
                            <button type="button" class="btn btn-glow-secondary btn-secondary" title="btn btn-glow-secondary btn-secondary" data-toggle="tooltip">Secondary</button>
                            <button type="button" class="btn btn-glow-success btn-success" title="btn btn-glow-success btn-success" data-toggle="tooltip">Success</button>
                            <button type="button" class="btn btn-glow-danger btn-danger" title="btn btn-glow-danger btn-danger" data-toggle="tooltip">Danger</button>
                            <button type="button" class="btn btn-glow-warning btn-warning" title="btn btn-glow-warning btn-warning" data-toggle="tooltip">Warning</button>
                            <button type="button" class="btn btn-glow-info btn-info" title="btn btn-glow-info btn-info" data-toggle="tooltip">Info</button>
                            <button type="button" class="btn btn-glow-light btn-light" title="btn btn-glow-light btn-light" data-toggle="tooltip">Light</button>
                            <button type="button" class="btn btn-glow-dark btn-dark" title="btn btn-glow-dark btn-dark" data-toggle="tooltip">Dark</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Shadow Button</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.shadow-{ 1 / 2 / 3 / 4 / 5 }</code> in class <code>.btn</code> class to get Shadow button</p>
                            <button type="button" class="btn shadow-1 btn-primary">.shadow-1</button>
                            <button type="button" class="btn shadow-2 btn-success">.shadow-2</button>
                            <button type="button" class="btn shadow-3 btn-danger">.shadow-3</button>
                            <button type="button" class="btn shadow-4 btn-warning">.shadow-4</button>
                            <button type="button" class="btn shadow-5 btn-info">.shadow-5</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Sizes [ Large ]</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.btn-lg</code> in class <code>.btn</code> class to get Large button</p>
                            <button type="button" class="btn btn-primary btn-lg">Large button</button>
                            <button type="button" class="btn btn-secondary btn-lg">Large button</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Sizes [ Small ]</h5>
                        </div>
                        <div class="card-block">
                            <p>use <code>.btn-sm</code> in class <code>.btn</code> class to get Small button</p>
                            <button type="button" class="btn btn-primary btn-sm">Large button</button>
                            <button type="button" class="btn btn-secondary btn-sm">Large button</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Checkbox Button</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-secondary active">
                                    <input type="checkbox" checked> Checked</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Radio Buttons</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-secondary active">
                                    <input type="radio" name="options" id="option1" checked> Active</label>
                                <label class="btn btn-secondary">
                                    <input type="radio" name="options" id="option2"> Radio</label>
                                <label class="btn btn-secondary">
                                    <input type="radio" name="options" id="option3"> Radio</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Button With Icon</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-primary"><i class="feather icon-thumbs-up"></i>Primary</button>
                            <button type="button" class="btn btn-secondary"><i class="feather icon-camera"></i>Secondary</button>
                            <button type="button" class="btn btn-success"><i class="feather icon-check-circle"></i>Success</button>
                            <button type="button" class="btn btn-danger"><i class="feather icon-slash"></i>Danger</button>
                            <button type="button" class="btn btn-warning"><i class="feather icon-alert-triangle"></i>Warning</button>
                            <button type="button" class="btn btn-info"><i class="feather icon-info"></i>Info</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Outline Icon Buttons</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-outline-primary"><i class="feather icon-thumbs-up"></i>Primary</button>
                            <button type="button" class="btn btn-outline-secondary"><i class="feather icon-camera"></i>Secondary</button>
                            <button type="button" class="btn btn-outline-success"><i class="feather icon-check-circle"></i>Success</button>
                            <button type="button" class="btn btn-outline-danger"><i class="feather icon-slash"></i>Danger</button>
                            <button type="button" class="btn btn-outline-warning"><i class="feather icon-alert-triangle"></i>Warning</button>
                            <button type="button" class="btn btn-outline-info"><i class="feather icon-info"></i>Info</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Only Icon</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-icon btn-primary"><i class="feather icon-thumbs-up"></i></button>
                            <button type="button" class="btn btn-icon btn-secondary"><i class="feather icon-camera"></i></button>
                            <button type="button" class="btn btn-icon btn-success"><i class="feather icon-check-circle"></i></button>
                            <button type="button" class="btn btn-icon btn-danger"><i class="feather icon-slash"></i></button>
                            <button type="button" class="btn btn-icon btn-warning"><i class="feather icon-alert-triangle"></i></button>
                            <button type="button" class="btn btn-icon btn-info"><i class="feather icon-info"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Outline Icon</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-icon btn-outline-primary"><i class="feather icon-thumbs-up"></i></button>
                            <button type="button" class="btn btn-icon btn-outline-secondary"><i class="feather icon-camera"></i></button>
                            <button type="button" class="btn btn-icon btn-outline-success"><i class="feather icon-check-circle"></i></button>
                            <button type="button" class="btn btn-icon btn-outline-danger"><i class="feather icon-slash"></i></button>
                            <button type="button" class="btn btn-icon btn-outline-warning"><i class="feather icon-alert-triangle"></i></button>
                            <button type="button" class="btn btn-icon btn-outline-info"><i class="feather icon-info"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Icon Button Rounded</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-icon btn-rounded btn-primary"><i class="feather icon-thumbs-up"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-secondary"><i class="feather icon-camera"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-success"><i class="feather icon-check-circle"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-danger"><i class="feather icon-slash"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-warning"><i class="feather icon-alert-triangle"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-info"><i class="feather icon-info"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Icon Outline Button Rounded</h5>
                        </div>
                        <div class="card-block">
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-primary"><i class="feather icon-thumbs-up"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-secondary"><i class="feather icon-camera"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-success"><i class="feather icon-check-circle"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-danger"><i class="feather icon-slash"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-warning"><i class="feather icon-alert-triangle"></i></button>
                            <button type="button" class="btn btn-icon btn-rounded btn-outline-info"><i class="feather icon-info"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Dropdown Button</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Split Dropdown Button</h5>
                        </div>
                        <div class="card-block">
                            <!-- Example split danger button -->
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-primary">Primary</button>
                                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-secondary">Secondary</button>
                                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-success">Success</button>
                                <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-warning">Warning</button>
                                <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Outline Dropdown Button</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button class="btn btn-outline-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Split Outline Dropdown Button</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-primary">Primary</button>
                                <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-success">Success</button>
                                <button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-danger">Danger</button>
                                <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-warning">Warning</button>
                                <button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2">
                                <button type="button" class="btn btn-outline-info">Info</button>
                                <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#!">Separated link</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Icon Dropdown</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-thumbs-up"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-camera"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-check-circle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-slash"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-alert-triangle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-info"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Outline Icon Dropdown</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-thumbs-up"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-camera"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-check-circle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-slash"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-alert-triangle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-outline-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-info"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Rounded Icon Dropdown</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-thumbs-up"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-camera"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-check-circle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-slash"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-alert-triangle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-info"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Outline Rounded Icon Dropdown</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-thumbs-up"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-camera"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-check-circle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-slash"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-alert-triangle"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                            <div class="btn-group mb-2 mr-2 ">
                                <button class="btn drp-icon btn-rounded btn-outline-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-info"></i></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#!">Action</a>
                                    <a class="dropdown-item" href="#!">Another action</a>
                                    <a class="dropdown-item" href="#!">Something else here</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Basic Button Group</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group mb-2" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-secondary">Left</button>
                                <button type="button" class="btn btn-secondary">Middle</button>
                                <button type="button" class="btn btn-secondary">Right</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Button Toolbar</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                                <div class="btn-group mr-2" role="group" aria-label="First group">
                                    <button type="button" class="btn btn-secondary">1</button>
                                    <button type="button" class="btn btn-secondary">2</button>
                                    <button type="button" class="btn btn-secondary">3</button>
                                    <button type="button" class="btn btn-secondary">4</button>
                                </div>
                                <div class="btn-group mr-2" role="group" aria-label="Second group">
                                    <button type="button" class="btn btn-secondary">5</button>
                                    <button type="button" class="btn btn-secondary">6</button>
                                    <button type="button" class="btn btn-secondary">7</button>
                                </div>
                                <div class="btn-group" role="group" aria-label="Third group">
                                    <button type="button" class="btn btn-secondary">8</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Button Toolbar Size</h5>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-xl-4 col-md-12 mb-2">
                                    <p>use <code>.btn-group-lg</code> in class <code>.btn-group</code> class to get Large size button group</p>
                                    <div class="btn-group btn-group-lg" role="group" aria-label="button groups xl">
                                        <button type="button" class="btn btn-secondary">Left</button>
                                        <button type="button" class="btn btn-secondary">Middle</button>
                                        <button type="button" class="btn btn-secondary">Right</button>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-2">
                                    <p>this is default size</p>
                                    <div class="btn-group" role="group" aria-label="button groups">
                                        <button type="button" class="btn btn-secondary">Left</button>
                                        <button type="button" class="btn btn-secondary">Middle</button>
                                        <button type="button" class="btn btn-secondary">Right</button>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-2">
                                    <p>use <code>.btn-group-sm</code> in class <code>.btn-group</code> class to get Small size button group</p>
                                    <div class="btn-group btn-group-sm" role="group" aria-label="button groups sm">
                                        <button type="button" class="btn btn-secondary">Left</button>
                                        <button type="button" class="btn btn-secondary">Middle</button>
                                        <button type="button" class="btn btn-secondary">Right</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Nesting</h5>
                        </div>
                        <div class="card-block">
                            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                <button type="button" class="btn btn-secondary">1</button>
                                <button type="button" class="btn btn-secondary">2</button>

                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                        <a class="dropdown-item" href="#!">Dropdown link</a>
                                        <a class="dropdown-item" href="#!">Dropdown link</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Vertical Variation</h5>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-4">
                                    <div class="btn-group btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
                                        <button type="button" class="btn btn-secondary">1</button>
                                        <button type="button" class="btn btn-secondary">2</button>
                                        <button type="button" class="btn btn-secondary">3</button>
                                    </div>
                                </div>
                                <div class="col-8">
                                    <div class="btn-group btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
                                        <button type="button" class="btn btn-secondary">1</button>
                                        <button type="button" class="btn btn-secondary">2</button>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
                                                <a class="dropdown-item" href="#!">Dropdown link</a>
                                                <a class="dropdown-item" href="#!">Dropdown link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-radio">Radio button</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Radio</h5>
                            <span class="d-block m-t-5">Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <!-- [ default radio ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Default Radio</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio d-inline">
                                            <input type="radio" name="radio-1" id="radio-1" checked>
                                            <label for="radio-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio d-inline">
                                            <input type="radio" name="radio-1" id="radio-2">
                                            <label for="radio-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio d-inline m-r-10">
                                            <input type="radio" id="radio-3" disabled>
                                            <label for="radio-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio d-inline m-r-10">
                                            <input type="radio" id="radio-4" disabled checked>
                                            <label for="radio-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Radio Fill Button</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-fill d-inline">
                                            <input type="radio" name="radio-fill-1" id="radio-fill-1" checked>
                                            <label for="radio-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-fill d-inline">
                                            <input type="radio" name="radio-fill-1" id="radio-fill-2">
                                            <label for="radio-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-fill d-inline m-r-10">
                                            <input type="radio" name="radio-fill-3" id="radio-fill-3" disabled>
                                            <label for="radio-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-fill d-inline m-r-10">
                                            <input type="radio" id="radio-fill-4" disabled checked>
                                            <label for="radio-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline Button</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio d-inline">
                                            <input type="radio" name="radio-in-1" id="radio-in-1" checked>
                                            <label for="radio-in-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio d-inline">
                                            <input type="radio" name="radio-in-1" id="radio-in-2">
                                            <label for="radio-in-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline fill Button</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-fill d-inline">
                                            <input type="radio" name="radio-in-2" id="radio-infill-1" checked>
                                            <label for="radio-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-fill d-inline">
                                            <input type="radio" name="radio-in-2" id="radio-infill-2">
                                            <label for="radio-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ default radio ] end -->
                                <!-- [ primary radio ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Primary Radio</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-primary d-inline">
                                            <input type="radio" name="radio-p-1" id="radio-p-1" checked>
                                            <label for="radio-p-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-primary d-inline">
                                            <input type="radio" name="radio-p-1" id="radio-p-2">
                                            <label for="radio-p-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-primary d-inline m-r-10">
                                            <input type="radio" id="radio-p-3" disabled>
                                            <label for="radio-p-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-primary d-inline m-r-10">
                                            <input type="radio" id="radio-p-4" disabled checked>
                                            <label for="radio-p-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Radio fill Button</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-primary radio-fill d-inline">
                                            <input type="radio" name="radio-p-fill-1" id="radio-p-fill-1" checked>
                                            <label for="radio-p-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-primary radio-fill d-inline">
                                            <input type="radio" name="radio-p-fill-1" id="radio-p-fill-2">
                                            <label for="radio-p-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-primary radio-fill d-inline m-r-10">
                                            <input type="radio" name="radio-p-fill-3" id="radio-p-fill-3" disabled>
                                            <label for="radio-p-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-primary radio-fill d-inline m-r-10">
                                            <input type="radio" id="radio-p-fill-4" disabled checked>
                                            <label for="radio-p-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline Button</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-primary d-inline">
                                            <input type="radio" name="radio-p-fill-5" id="radio-p-fill-5" checked>
                                            <label for="radio-p-fill-5" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-primary d-inline">
                                            <input type="radio" name="radio-p-fill-5" id="radio-p-fill-6">
                                            <label for="radio-p-fill-6" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline fill Button</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-primary radio-fill d-inline">
                                            <input type="radio" name="radio-p-in-1" id="radio-p-infill-1" checked>
                                            <label for="radio-p-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-primary radio-fill d-inline">
                                            <input type="radio" name="radio-p-in-1" id="radio-p-infill-2">
                                            <label for="radio-p-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ primary radio ] end -->
                                <!-- [ Danger radio ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Danger Radio</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-danger d-inline">
                                            <input type="radio" name="radio-d-1" id="radio-d-1" checked>
                                            <label for="radio-d-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-danger d-inline">
                                            <input type="radio" name="radio-d-1" id="radio-d-2">
                                            <label for="radio-d-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-danger d-inline m-r-10">
                                            <input type="radio" id="radio-d-3" disabled>
                                            <label for="radio-d-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-danger d-inline m-r-10">
                                            <input type="radio" id="radio-d-4" disabled checked>
                                            <label for="radio-d-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Radio fill Button</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-danger radio-fill d-inline">
                                            <input type="radio" name="radio-d-fill-1" id="radio-d-fill-1" checked>
                                            <label for="radio-d-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-danger radio-fill d-inline">
                                            <input type="radio" name="radio-d-fill-1" id="radio-d-fill-2">
                                            <label for="radio-d-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-danger radio-fill d-inline m-r-10">
                                            <input type="radio" name="radio-d-fill-3" id="radio-d-fill-3" disabled>
                                            <label for="radio-d-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-danger radio-fill d-inline m-r-10">
                                            <input type="radio" id="radio-d-fill-4" disabled checked>
                                            <label for="radio-d-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline Button</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-danger d-inline">
                                            <input type="radio" name="radio-d-fill-5" id="radio-d-fill-5" checked>
                                            <label for="radio-d-fill-5" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-danger d-inline">
                                            <input type="radio" name="radio-d-fill-5" id="radio-d-fill-6">
                                            <label for="radio-d-fill-6" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline fill Button</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-danger radio-fill d-inline">
                                            <input type="radio" name="radio-d-in-1" id="radio-d-infill-1" checked>
                                            <label for="radio-d-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-danger radio-fill d-inline">
                                            <input type="radio" name="radio-d-in-1" id="radio-d-infill-2">
                                            <label for="radio-d-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Danger radio ] end -->
                                <!-- [ success radio ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Success Radio</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-success d-inline">
                                            <input type="radio" name="radio-s-1" id="radio-s-1" checked>
                                            <label for="radio-s-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-success d-inline">
                                            <input type="radio" name="radio-s-1" id="radio-s-2">
                                            <label for="radio-s-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-success d-inline m-r-10">
                                            <input type="radio" id="radio-s-3" disabled>
                                            <label for="radio-s-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-success d-inline m-r-10">
                                            <input type="radio" id="radio-s-4" disabled checked>
                                            <label for="radio-s-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Radio fill</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-success radio-fill d-inline">
                                            <input type="radio" name="radio-s-fill-1" id="radio-s-fill-1" checked>
                                            <label for="radio-s-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-success radio-fill d-inline">
                                            <input type="radio" name="radio-s-fill-1" id="radio-s-fill-2">
                                            <label for="radio-s-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-success radio-fill d-inline m-r-10">
                                            <input type="radio" name="radio-s-fill-3" id="radio-s-fill-3" disabled>
                                            <label for="radio-s-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-success radio-fill d-inline m-r-10">
                                            <input type="radio" id="radio-s-fill-4" disabled checked>
                                            <label for="radio-s-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-success d-inline">
                                            <input type="radio" name="radio-s-in-1" id="radio-s-in-1" checked>
                                            <label for="radio-s-in-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-success d-inline">
                                            <input type="radio" name="radio-s-in-1" id="radio-s-in-2">
                                            <label for="radio-s-in-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline fill</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-success radio-fill d-inline">
                                            <input type="radio" name="radio-s-in-3" id="radio-s-infill-3" checked>
                                            <label for="radio-s-infill-3" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-success radio-fill d-inline">
                                            <input type="radio" name="radio-s-in-3" id="radio-s-infill-2">
                                            <label for="radio-s-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ success radio ] end -->
                                <!-- [ warning radio ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Warning Radio</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-warning d-inline">
                                            <input type="radio" name="radio-w-1" id="radio-w-1" checked>
                                            <label for="radio-w-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-warning d-inline">
                                            <input type="radio" name="radio-w-1" id="radio-w-2">
                                            <label for="radio-w-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-warning d-inline m-r-10">
                                            <input type="radio" id="radio-w-3" disabled>
                                            <label for="radio-w-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-warning d-inline m-r-10">
                                            <input type="radio" id="radio-w-4" disabled checked>
                                            <label for="radio-w-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Radio fill</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-warning radio-fill d-inline">
                                            <input type="radio" name="radio-w-fill-1" id="radio-w-fill-1" checked>
                                            <label for="radio-w-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-warning radio-fill d-inline">
                                            <input type="radio" name="radio-w-fill-1" id="radio-w-fill-2">
                                            <label for="radio-w-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-warning radio-fill d-inline m-r-10">
                                            <input type="radio" name="radio-w-fill-3" id="radio-w-fill-3" disabled>
                                            <label for="radio-w-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-warning radio-fill d-inline m-r-10">
                                            <input type="radio" id="radio-w-fill-4" disabled checked>
                                            <label for="radio-w-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-warning d-inline">
                                            <input type="radio" name="radio-w-in-1" id="radio-w-in-1" checked>
                                            <label for="radio-w-in-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-warning d-inline">
                                            <input type="radio" name="radio-w-in-1" id="radio-w-in-2">
                                            <label for="radio-w-in-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline fill</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-warning radio-fill d-inline">
                                            <input type="radio" name="radio-w-in-3" id="radio-w-infill-1" checked>
                                            <label for="radio-w-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-warning radio-fill d-inline">
                                            <input type="radio" name="radio-w-in-3" id="radio-w-infill-2">
                                            <label for="radio-w-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ warning radio ] end -->
                                <!-- [ Info radio ] start -->
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h5>Info Radio</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-info d-inline">
                                            <input type="radio" name="radio-i-1" id="radio-i-1" checked>
                                            <label for="radio-i-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-info d-inline">
                                            <input type="radio" name="radio-i-1" id="radio-i-2">
                                            <label for="radio-i-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-info d-inline m-r-10">
                                            <input type="radio" id="radio-i-3" disabled>
                                            <label for="radio-i-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-info d-inline m-r-10">
                                            <input type="radio" id="radio-i-4" disabled checked>
                                            <label for="radio-i-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Radio fill</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="radio radio-info radio-fill d-inline">
                                            <input type="radio" name="radio-i-fill-1" id="radio-i-fill-1" checked>
                                            <label for="radio-i-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-info radio-fill d-inline">
                                            <input type="radio" name="radio-i-fill-1" id="radio-i-fill-2">
                                            <label for="radio-i-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-info radio-fill d-inline m-r-10">
                                            <input type="radio" name="radio-i-fill-3" id="radio-i-fill-3" disabled>
                                            <label for="radio-i-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-info radio-fill d-inline m-r-10">
                                            <input type="radio" id="radio-i-fill-4" disabled checked>
                                            <label for="radio-i-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-info d-inline">
                                            <input type="radio" name="radio-i-in-1" id="radio-i-in-1" checked>
                                            <label for="radio-i-in-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-info d-inline">
                                            <input type="radio" name="radio-i-in-1" id="radio-i-in-2">
                                            <label for="radio-i-in-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline fill</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-info radio-fill d-inline">
                                            <input type="radio" name="radio-i-in-2" id="radio-i-infill-1" checked>
                                            <label for="radio-i-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="radio radio-info radio-fill d-inline">
                                            <input type="radio" name="radio-i-in-2" id="radio-i-infill-2">
                                            <label for="radio-i-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Info radio ] end -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-checkbox">Checkbox</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Checkbox</h5>
                            <span class="d-block m-t-5">Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <!-- [ default-checkbox ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Default checkbox</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox d-inline">
                                            <input type="checkbox" name="checkbox-1" id="checkbox-1" checked>
                                            <label for="checkbox-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox d-inline">
                                            <input type="checkbox" name="checkbox-1" id="checkbox-2">
                                            <label for="checkbox-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-3" disabled>
                                            <label for="checkbox-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-4" disabled checked>
                                            <label for="checkbox-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-1" checked>
                                            <label for="checkbox-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-2">
                                            <label for="checkbox-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" name="checkbox-fill-3" id="checkbox-fill-3" disabled>
                                            <label for="checkbox-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-fill-4" disabled checked>
                                            <label for="checkbox-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline checkbox </h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox d-inline">
                                            <input type="checkbox" name="checkbox-in-1" id="checkbox-in-1" checked>
                                            <label for="checkbox-in-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox d-inline">
                                            <input type="checkbox" name="checkbox-in-1" id="checkbox-in-2">
                                            <label for="checkbox-in-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-in-3" id="checkbox-infill-1" checked>
                                            <label for="checkbox-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-in-3" id="checkbox-infill-2">
                                            <label for="checkbox-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ default-checkbox ] end -->
                                <!-- [ primary-checkbox ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Primary checkbox</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary d-inline">
                                            <input type="checkbox" name="checkbox-p-1" id="checkbox-p-1" checked>
                                            <label for="checkbox-p-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary d-inline">
                                            <input type="checkbox" name="checkbox-p-1" id="checkbox-p-2">
                                            <label for="checkbox-p-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-p-3" disabled>
                                            <label for="checkbox-p-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-p-4" disabled checked>
                                            <label for="checkbox-p-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-p-fill-1" id="checkbox-p-fill-1" checked>
                                            <label for="checkbox-p-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-fill-p-1" id="checkbox-p-fill-2">
                                            <label for="checkbox-p-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" name="checkbox-p-fill-3" id="checkbox-p-fill-3" disabled>
                                            <label for="checkbox-p-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-p-fill-4" disabled checked>
                                            <label for="checkbox-p-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-primary d-inline">
                                            <input type="checkbox" name="checkbox-p-in-1" id="checkbox-p-in-1" checked>
                                            <label for="checkbox-p-in-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-primary d-inline">
                                            <input type="checkbox" name="checkbox-in-1" id="checkbox-p-in-2">
                                            <label for="checkbox-p-in-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-primary checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-p-in-1" id="checkbox-p-infill-1" checked>
                                            <label for="checkbox-p-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-primary checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-p-in-1" id="checkbox-p-infill-2">
                                            <label for="checkbox-p-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ primary-checkbox ] end -->
                                <!-- [ Danger-checkbox ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Danger checkbox</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-danger d-inline">
                                            <input type="checkbox" name="checkbox-d-1" id="checkbox-d-1" checked>
                                            <label for="checkbox-d-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-danger d-inline">
                                            <input type="checkbox" name="checkbox-d-1" id="checkbox-d-2">
                                            <label for="checkbox-d-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-danger d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-d-3" disabled>
                                            <label for="checkbox-d-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-danger d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-d-4" disabled checked>
                                            <label for="checkbox-d-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-danger checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-d-fill-1" id="checkbox-d-fill-1" checked>
                                            <label for="checkbox-d-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-danger checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-fill-d-1" id="checkbox-d-fill-2">
                                            <label for="checkbox-d-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-danger checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" name="checkbox-d-fill-3" id="checkbox-d-fill-3" disabled>
                                            <label for="checkbox-d-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-danger checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-d-fill-4" disabled checked>
                                            <label for="checkbox-d-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-danger d-inline">
                                            <input type="checkbox" name="checkbox-d-in-1" id="checkbox-d-in-1" checked>
                                            <label for="checkbox-d-in-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-danger d-inline">
                                            <input type="checkbox" name="checkbox-in-1" id="checkbox-d-in-2">
                                            <label for="checkbox-d-in-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-danger checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-d-in-1" id="checkbox-d-infill-1" checked>
                                            <label for="checkbox-d-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-danger checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-d-in-1" id="checkbox-d-infill-2">
                                            <label for="checkbox-d-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Danger-checkbox ] end -->
                                <!-- [ success-checkbox ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Success checkbox</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-success d-inline">
                                            <input type="checkbox" name="checkbox-s-1" id="checkbox-s-1" checked>
                                            <label for="checkbox-s-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-success d-inline">
                                            <input type="checkbox" name="checkbox-s-1" id="checkbox-s-2">
                                            <label for="checkbox-s-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-success d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-s-3" disabled>
                                            <label for="checkbox-s-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-success d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-s-4" disabled checked>
                                            <label for="checkbox-s-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-success checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-s-fill-1" id="checkbox-s-fill-1" checked>
                                            <label for="checkbox-s-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-success checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-fill-s-1" id="checkbox-s-fill-2">
                                            <label for="checkbox-s-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-success checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" name="checkbox-s-fill-3" id="checkbox-s-fill-3" disabled>
                                            <label for="checkbox-s-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-success checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-s-fill-4" disabled checked>
                                            <label for="checkbox-s-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-success d-inline">
                                            <input type="checkbox" name="checkbox-s-in-1" id="checkbox-s-in-1" checked>
                                            <label for="checkbox-s-in-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-success d-inline">
                                            <input type="checkbox" name="checkbox-in-1" id="checkbox-s-in-2">
                                            <label for="checkbox-s-in-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-success checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-s-in-1" id="checkbox-s-infill-1" checked>
                                            <label for="checkbox-s-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-success checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-s-in-1" id="checkbox-s-infill-2">
                                            <label for="checkbox-s-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ success-checkbox ] end -->
                                <!-- [ warning-checkbox ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Warning checkbox</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-warning d-inline">
                                            <input type="checkbox" name="checkbox-w-1" id="checkbox-w-1" checked>
                                            <label for="checkbox-w-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-warning d-inline">
                                            <input type="checkbox" name="checkbox-w-1" id="checkbox-w-2">
                                            <label for="checkbox-w-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-warning d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-w-3" disabled>
                                            <label for="checkbox-w-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-warning d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-w-4" disabled checked>
                                            <label for="checkbox-w-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-warning checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-w-fill-1" id="checkbox-w-fill-1" checked>
                                            <label for="checkbox-w-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-warning checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-fill-w-1" id="checkbox-w-fill-2">
                                            <label for="checkbox-w-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-warning checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" name="checkbox-w-fill-3" id="checkbox-w-fill-3" disabled>
                                            <label for="checkbox-w-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-warning checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-w-fill-4" disabled checked>
                                            <label for="checkbox-w-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-warning d-inline">
                                            <input type="checkbox" name="checkbox-w-in-1" id="checkbox-w-in-1" checked>
                                            <label for="checkbox-w-in-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-warning d-inline">
                                            <input type="checkbox" name="checkbox-in-1" id="checkbox-w-in-2">
                                            <label for="checkbox-w-in-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-warning checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-w-in-1" id="checkbox-w-infill-1" checked>
                                            <label for="checkbox-w-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-warning checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-w-in-1" id="checkbox-w-infill-2">
                                            <label for="checkbox-w-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ warning-checkbox ] end -->
                                <!-- [ Info-checkbox ] start -->
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Info checkbox</h5>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-info d-inline">
                                            <input type="checkbox" name="checkbox-i-1" id="checkbox-i-1" checked>
                                            <label for="checkbox-i-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-info d-inline">
                                            <input type="checkbox" name="checkbox-i-1" id="checkbox-i-2">
                                            <label for="checkbox-i-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-info d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-i-3" disabled>
                                            <label for="checkbox-i-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-info d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-i-4" disabled checked>
                                            <label for="checkbox-i-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-info checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-i-fill-1" id="checkbox-i-fill-1" checked>
                                            <label for="checkbox-i-fill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-info checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-fill-i-1" id="checkbox-i-fill-2">
                                            <label for="checkbox-i-fill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-info checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" name="checkbox-i-fill-3" id="checkbox-i-fill-3" disabled>
                                            <label for="checkbox-i-fill-3" class="cr">Disabled</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox checkbox-info checkbox-fill d-inline m-r-10">
                                            <input type="checkbox" id="checkbox-i-fill-4" disabled checked>
                                            <label for="checkbox-i-fill-4" class="cr">Disabled Checked</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Inline checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-info d-inline">
                                            <input type="checkbox" name="checkbox-i-in-1" id="checkbox-i-in-1" checked>
                                            <label for="checkbox-i-in-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-info d-inline">
                                            <input type="checkbox" name="checkbox-in-1" id="checkbox-i-in-2">
                                            <label for="checkbox-i-in-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                    <h6 class="mt-4">Bordered checkbox</h6>
                                    <hr>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-info checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-i-in-1" id="checkbox-i-infill-1" checked>
                                            <label for="checkbox-i-infill-1" class="cr">Checked</label>
                                        </div>
                                    </div>
                                    <div class="form-group d-inline">
                                        <div class="checkbox checkbox-info checkbox-fill d-inline">
                                            <input type="checkbox" name="checkbox-i-in-1" id="checkbox-i-infill-2">
                                            <label for="checkbox-i-infill-2" class="cr">Uncheck</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ Info-checkbox ] end -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h2 class="docs-header" id="page-bootstrap">Bootstrap Tags</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bootstrap Tags Input</h5>
                            <span class="d-block m-t-5">Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
                        </div>
                        <div class="card-block">
                            <div class="mb-5">
                                <h5>Markup</h5>
                                <hr>
                                <p>Just add <code>data-role="tagsinput"</code> to your input field to automatically change it to a tags input field.</p>
                                <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
                            </div>
                            <div class="mb-5">
                                <h5 class="mt-5">True Multi Value</h5>
                                <hr>
                                <p>Use a <code>&lt;select multiple /&gt;</code> as your input element for a tags input, to gain true multi value support. Instead of a comma separated string, the values will be set in an array.
                                    Existing <code>&lt;option /&gt;</code>elements will automatically be set as tags. This makes it also possible to create tags containing a comma.</p>
                                <select multiple data-role="tagsinput">
                                    <option value="Amsterdam">Amsterdam</option>
                                    <option value="Washington">Washington</option>
                                    <option value="Sydney">Sydney</option>
                                    <option value="Beijing">Beijing</option>
                                    <option value="Cairo">Cairo</option>
                                </select>
                            </div>
                            <div class="mb-5">
                                <h5 class="mt-5">Typeahead</h5>
                                <hr>
                                <p>Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed <a href="http://twitter.github.io/typeahead.js/">typeahead.js</a>. An example of using
                                    this is shown below.</p>
                                <input type="text" value="Amsterdam,Washington" class="typeahead" />
                            </div>
                            <div class="mb-5">
                                <h5>Categorizing Tags</h5>
                                <hr>
                                <p>You can set a fixed css class for your tags, or determine dynamically by providing a custom function.</p>
                                <input type="text" class="category-tag" />
                            </div>
                            <div class="mb-5">
                                <h5>Objects As Tags</h5>
                                <hr>
                                <p>Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.</p>
                                <input type="text" class="objects-tag" />
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            // [ Typeahead ] start
                            var citynames = new Bloodhound({
                                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                                queryTokenizer: Bloodhound.tokenizers.whitespace,
                                prefetch: {
                                    url: 'assets/plugins/bootstrap-tagsinput-latest/json/citynames.json',
                                    filter: function(list) {
                                        return $.map(list, function(cityname) {
                                            return {
                                                name: cityname
                                            };
                                        });
                                    }
                                }
                            });
                            citynames.initialize();
                            $('.typeahead').tagsinput({
                                typeaheadjs: {
                                    name: 'citynames',
                                    displayKey: 'name',
                                    valueKey: 'name',
                                    source: citynames.ttAdapter()
                                }
                            });

                            // [ Categorizing tag ] start
                            var cities = new Bloodhound({
                                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
                                queryTokenizer: Bloodhound.tokenizers.whitespace,
                                prefetch: 'assets/plugins/bootstrap-tagsinput-latest/json/cities.json'
                            });
                            cities.initialize();

                            var elt = $('.category-tag');
                            elt.tagsinput({
                                tagClass: function(item) {
                                    switch (item.continent) {
                                        case 'Europe':
                                            return 'label label-primary';
                                        case 'America':
                                            return 'label label-danger label-important';
                                        case 'Australia':
                                            return 'label label-success';
                                        case 'Africa':
                                            return 'label label-default';
                                        case 'Asia':
                                            return 'label label-warning';
                                    }
                                },
                                itemValue: 'value',
                                itemText: 'text',
                                typeaheadjs: {
                                    name: 'cities',
                                    displayKey: 'text',
                                    source: cities.ttAdapter()
                                }
                            });
                            elt.tagsinput('add', {
                                "value": 1,
                                "text": "Amsterdam",
                                "continent": "Europe"
                            });
                            elt.tagsinput('add', {
                                "value": 4,
                                "text": "Washington",
                                "continent": "America"
                            });
                            elt.tagsinput('add', {
                                "value": 7,
                                "text": "Sydney",
                                "continent": "Australia"
                            });
                            elt.tagsinput('add', {
                                "value": 10,
                                "text": "Beijing",
                                "continent": "Asia"
                            });
                            elt.tagsinput('add', {
                                "value": 13,
                                "text": "Cairo",
                                "continent": "Africa"
                            });

                            // [ object tag ] start
                            var cities = new Bloodhound({
                                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
                                queryTokenizer: Bloodhound.tokenizers.whitespace,
                                prefetch: 'assets/plugins/bootstrap-tagsinput-latest/json/cities.json'
                            });
                            cities.initialize();

                            var elt = $('.objects-tag');
                            elt.tagsinput({
                                itemValue: 'value',
                                itemText: 'text',
                                typeaheadjs: {
                                    name: 'cities',
                                    displayKey: 'text',
                                    source: cities.ttAdapter()
                                }
                            });
                            elt.tagsinput('add', {
                                "value": 1,
                                "text": "Amsterdam",
                                "continent": "Europe"
                            });
                            elt.tagsinput('add', {
                                "value": 4,
                                "text": "Washington",
                                "continent": "America"
                            });
                            elt.tagsinput('add', {
                                "value": 7,
                                "text": "Sydney",
                                "continent": "Australia"
                            });
                            elt.tagsinput('add', {
                                "value": 10,
                                "text": "Beijing",
                                "continent": "Asia"
                            });
                            elt.tagsinput('add', {
                                "value": 13,
                                "text": "Cairo",
                                "continent": "Africa"
                            });
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Tags input css --&gt;
                    &lt;link href="assets/plugins/bootstrap-tagsinput-latest/css/bootstrap-tagsinput.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Tags input Js --&gt;
                    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/bootstrap-tagsinput-latest/js/bootstrap-tagsinput.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-maxlength">Bootstrap maxlength</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>bootstrap Maxlength</h5>
                            <span class="d-block m-t-5">Add class of <code>.form-control</code> with <code>&lt;input&gt;</code> tag</span>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-sm-12 col-xl-4 mb-5">
                                    <h5>Default</h5>
                                    <hr>
                                    <p>The badge will show up by default when the remaining chars are <code>10</code> or <code>less</code>:</p>
                                    <input type="text" class="form-control" placeholder="Type your keywords..." maxlength="10">
                                </div>
                                <div class="col-sm-12 col-xl-4 mb-5">
                                    <h5>Threshold</h5>
                                    <hr>
                                    <p>Do you want the badge to show up when there are <code>20 chars</code> or less? Use the <code>threshold</code> option:</p>
                                    <input type="text" class="form-control thresold-i" placeholder="Type your keywords..." maxlength="20">
                                </div>
                                <div class="col-sm-12 col-xl-4 mb-5">
                                    <h5>Color-Lables</h5>
                                    <hr>
                                    <p>Just add <code>color-class</code>with <code>input</code></p>
                                    <input type="text" class="form-control color-class" placeholder="Type your keywords..." maxlength="25">
                                </div>
                                <div class="col-sm-12 col-xl-4 mb-5">
                                    <h5>Play With Positions</h5>
                                    <hr>
                                    <p>All you need to do is specify the <code>placement option</code>, with one of those strings. If none is specified, the positioning will be defauted to <code>'top-right'</code>.</p>
                                    <input type="text" class="form-control position-class" placeholder="Type your keywords..." maxlength="25">
                                </div>
                                <div class="col-sm-12 col-xl-8">
                                    <h5>Also Working With Textarea</h5>
                                    <hr>
                                    <p>Bootstrap maxlength supports textarea as well as inputs. Even on old IE.</p>
                                    <textarea class="form-control max-textarea" maxlength="255" rows="4"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            // [ defult length ] start
                            $('input[maxlength]').maxlength();

                            // [ Threshold ] start
                            $('input.thresold-i').maxlength({
                                threshold: 20
                            });

                            // [ Color-lables ] start
                            $('input.color-class').maxlength({
                                alwaysShow: true,
                                threshold: 10,
                                warningClass: "label label-success",
                                limitReachedClass: "label label-danger"
                            });

                            // [ Play With Positions ] start
                            $('input.position-class').maxlength({
                                alwaysShow: true,
                                placement: 'top-right'
                            });

                            // [ Working With Textarea ] start
                            $('textarea.max-textarea').maxlength({
                                alwaysShow: true
                            });
                        });
                    </script>
                </div>

            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Bootstrap tags Js --&gt;
                    &lt;script src="assets/plugins/bootstrap-maxlength/js/bootstrap-maxlength.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-validation">Validation</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Form Validation</h5>
                        </div>
                        <div class="card-block">
                            <form id="validation-form123" action="#!">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Email</label>
                                            <input type="text" class="form-control" name="validation-email" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Password</label>
                                            <input type="password" class="form-control" name="validation-password" placeholder="Password">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Confirm password</label>
                                            <input type="password" class="form-control" name="validation-password-confirmation" placeholder="Confirm password">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Required</label>
                                            <input type="text" class="form-control" name="validation-required" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">URL</label>
                                            <input type="text" class="form-control" name="validation-url" placeholder="Url">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Phone</label>
                                            <input type="text" class="form-control" name="validation-phone" placeholder="Phone: (999) 999-9999">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Select</label>
                                            <select class="form-control" name="validation-select">
                                                <option value>Select gear...</option>
                                                <optgroup label="Climbing">
                                                    <option value="pitons">Pitons</option>
                                                    <option value="cams">Cams</option>
                                                    <option value="nuts">Nuts</option>
                                                    <option value="bolts">Bolts</option>
                                                    <option value="stoppers">Stoppers</option>
                                                    <option value="sling">Sling</option>
                                                </optgroup>
                                                <optgroup label="Skiing">
                                                    <option value="skis">Skis</option>
                                                    <option value="skins">Skins</option>
                                                    <option value="poles">Poles</option>
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Text</label>
                                            <textarea class="form-control" name="validation-text"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">File</label>
                                            <div>
                                                <input type="file" class="validation-file" name="validation-file">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="switch d-inline m-r-10">
                                                <input type="checkbox" class="switcher-input" name="validation-switcher" id="switch-10">
                                                <label for="switch-1" class="cr"></label>
                                            </div>
                                            <label>Check me</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Radios</label>
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input class="form-check-input" type="radio" name="validation-radios"> Option one is this and that—be sure to include why it's great
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input class="form-check-input" type="radio" name="validation-radios"> Option two can be something else and selecting it will deselect option one
                                                </label>
                                            </div>
                                            <div class="form-check disabled">
                                                <label class="form-check-label">
                                                    <input class="form-check-input" type="radio" name="validation-radios"> Option three is disabled
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Custom radios</label>
                                            <div class="custom-controls-stacked">
                                                <label class="custom-control custom-radio">
                                                    <input name="validation-radios-custom" type="radio" class="custom-control-input">
                                                    <span class="custom-control-label">Option one is this and that—be sure to include why it's great</span>
                                                </label>
                                                <label class="custom-control custom-radio">
                                                    <input name="validation-radios-custom" type="radio" class="custom-control-input">
                                                    <span class="custom-control-label">Option two can be something else and selecting it will deselect option one</span>
                                                </label>
                                                <label class="custom-control custom-radio">
                                                    <input name="validation-radios-custom" type="radio" class="custom-control-input">
                                                    <span class="custom-control-label">Option three is disabled</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Checkbox</label>
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input class="form-check-input" type="checkbox" name="validation-checkbox"> Check me out
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">Custom checkbox</label>
                                            <br>
                                            <label class="custom-control custom-checkbox d-block">
                                                <input type="checkbox" class="custom-control-input" name="validation-checkbox-custom">
                                                <span class="custom-control-label">Check me</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $(function() {
                                // [ Add phone validator ] start
                                $.validator.addMethod(
                                    'phone_format',
                                    function(value, element) {
                                        return this.optional(element) || /^\(\d{3}\)[ ]\d{3}\-\d{4}$/.test(value);
                                    },
                                    'Invalid phone number.'
                                );

                                // [ Initialize validation ] start
                                $('#validation-form123').validate({
                                    ignore: '.ignore, .select2-input',
                                    focusInvalid: false,
                                    rules: {
                                        'validation-email': {
                                            required: true,
                                            email: true
                                        },
                                        'validation-password': {
                                            required: true,
                                            minlength: 6,
                                            maxlength: 20
                                        },
                                        'validation-password-confirmation': {
                                            required: true,
                                            minlength: 6,
                                            equalTo: 'input[name="validation-password"]'
                                        },
                                        'validation-required': {
                                            required: true
                                        },
                                        'validation-url': {
                                            required: true,
                                            url: true
                                        },
                                        'validation-phone': {
                                            required: true,
                                            phone_format: true
                                        },
                                        'validation-select': {
                                            required: true
                                        },
                                        'validation-bs-tagsinput': {
                                            required: true
                                        },
                                        'validation-text': {
                                            required: true
                                        },
                                        'validation-file': {
                                            required: true
                                        },
                                        'validation-switcher': {
                                            required: true
                                        },
                                        'validation-radios': {
                                            required: true
                                        },
                                        'validation-radios-custom': {
                                            required: true
                                        },
                                        'validation-checkbox': {
                                            required: true
                                        },
                                        'validation-checkbox-custom': {
                                            required: true
                                        },

                                        // Checkbox groups  //
                                    },

                                    // Errors //

                                    errorPlacement: function errorPlacement(error, element) {
                                        var $parent = $(element).parents('.form-group');

                                        // Do not duplicate errors
                                        if ($parent.find('.jquery-validation-error').length) {
                                            return;
                                        }

                                        $parent.append(
                                            error.addClass('jquery-validation-error small form-text invalid-feedback')
                                        );
                                    },
                                    highlight: function(element) {
                                        var $el = $(element);
                                        var $parent = $el.parents('.form-group');

                                        $el.addClass('is-invalid');

                                        // Select2 and Tagsinput
                                        if ($el.hasClass('select2-hidden-accessible') || $el.attr('data-role') === 'tagsinput') {
                                            $el.parent().addClass('is-invalid');
                                        }
                                    },
                                    unhighlight: function(element) {
                                        $(element).parents('.form-group').find('.is-invalid').removeClass('is-invalid');
                                    }
                                });

                            });
                        });
                    </script>
                </div>

            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Validation Js --&gt;
                    &lt;script src="assets/plugins/jquery-validation/js/jquery.validate.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-masking">Masking</h2>
            <div class="row">
                <div class="col-lg-12 col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Date</h5>
                            <span class="d-block m-t-5">Add class of <code>.date</code> with <code>data-mask</code> attribute</span>
                        </div>
                        <div class="card-block">
                            <form>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Insert Date 1</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control date" data-mask="99/99/9999">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Insert Date 2</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control date2" data-mask="99-99-9999">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $(".date").inputmask({
                                mask: "99/99/9999"
                            });

                            $(".date2").inputmask({
                                mask: "99-99-9999"
                            });
                        });
                    </script>
                </div>
                <div class="col-lg-12 col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Time</h5>
                            <span class="d-block m-t-5">Add class of <code>.hour</code> with <code>data-mask</code> attribute</span>
                        </div>
                        <div class="card-block">
                            <form>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Hour</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control hour" data-mask="99:99:99">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Date & Hour</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control dateHour" data-mask="99/99/9999 99:99:99">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(".hour").inputmask({
                            mask: "99:99:99"
                        });

                        $(".dateHour").inputmask({
                            mask: "99/99/9999 99:99:99"
                        });
                    </script>
                </div>
                <div class="col-lg-12 col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Phone no.</h5>
                            <span class="d-block m-t-5">Add class of <code>.mob_no</code> with <code>data-mask</code> attribute</span>
                        </div>
                        <div class="card-block">
                            <form>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Mobile No.</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control mob_no" data-mask="9999-999-999">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Telephone</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control phone" data-mask="9999-9999">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Tel. with Code Area</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control telphone_with_code" data-mask="(99) 9999-9999">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">US Telephone</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control us_telephone" data-mask="(999) 999-9999">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(".mob_no").inputmask({
                            mask: "9999-999-999"
                        });

                        $(".phone").inputmask({
                            mask: "9999-9999"
                        });

                        $(".telphone_with_code").inputmask({
                            mask: "(99) 9999-9999"
                        });

                        $(".us_telephone").inputmask({
                            mask: "(999) 999-9999"
                        });
                    </script>
                </div>
                <div class="col-lg-12 col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Network</h5>
                            <span class="d-block m-t-5">Add class of <code>.ip</code> with <code>data-mask</code> attribute</span>
                        </div>
                        <div class="card-block">
                            <form>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">IP Address</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control ip" data-mask="999.999.999.999">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">IPV4</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control ipv4" data-mask="99/99/9999 99:99:99">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">IPV6</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control ipv6" data-mask="9999:9999:9999:9:999:9999:9999:9999">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(".ip").inputmask({
                            mask: "999.999.999.999"
                        });

                        $(".ipv4").inputmask({
                            mask: "999.999.999.9999"
                        });

                        $(".ipv6").inputmask({
                            mask: "9999:9999:9999:9:999:9999:9999:9999"
                        });
                    </script>
                </div>
                <div class="col-lg-12 col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Numbers</h5>
                            <span class="d-block m-t-5">Add class of <code>.autonumber</code> with <code>&lt;input&gt;</code> tag</span>
                        </div>
                        <div class="card-block">
                            <form>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Default</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control autonumber" data-a-sep="." data-a-dec=",">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Auto Numeric (%)</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control autonumber" data-a-sign="%" data-p-sign="s">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Maximum Value (0 - 9999)</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control autonumber" data-v-max="9999" data-v-min="0">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Range Value (-99.99 - 1000.00)</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control autonumber" data-v-min="-99.99" data-v-max="1000.00">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Bracket Value</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control autonumber" data-a-sep="." data-a-dec="," data-v-min="-9999.99" data-v-max="0.00" data-n-bracket="(,)">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $('.autonumber').autoNumeric('init');
                    </script>
                </div>
                <div class="col-lg-12 col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Currency</h5>
                            <span class="d-block m-t-5">Add class of <code>.autonumber</code> with <code>data-a-*</code> attribute</span>
                        </div>
                        <div class="card-block">
                            <form>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Dollar ($)</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control autonumber" data-a-sign="$">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Euro (€)</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control autonumber" data-a-sign="€">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Rupee (Rs.)</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control autonumber" data-a-sign="Rs. ">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Renminbi (¥)</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control autonumber" data-d-group="4" data-a-sign="¥ ">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <label class="col-form-label">Pound (£)</label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control autonumber" data-a-sign="£ ">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $('.autonumber').autoNumeric('init');
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Input mask Js --&gt;
                    &lt;script src="assets/plugins/inputmask/js/inputmask.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/inputmask/js/jquery.inputmask.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/inputmask/js/autoNumeric.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-wizard">Wizard</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Smart Wizard</h5>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <!-- [ External toolbar sample ] start -->
                                    <h5>Theme:</h5>
                                    <select id="theme_selector" class="form-control custom-select col-lg-6 col-sm-12">
                                        <option value="default">default</option>
                                        <option value="arrows">arrows</option>
                                        <option value="dots">dots</option>
                                    </select>
                                    <!-- [ External toolbar sample ] End -->
                                </div>
                            </div>
                            <!-- [ SmartWizard html ] start -->
                            <div id="smartwizard">
                                <ul>
                                    <li><a href="#step-1">
                                            <h6>Step 1</h6>
                                            <p class="m-0">This is step description</p>
                                        </a></li>
                                    <li><a href="#step-2">
                                            <h6>Step 2</h6>
                                            <p class="m-0">This is step content</p>
                                        </a></li>
                                    <li><a href="#step-3">
                                            <h6>Step 3</h6>
                                            <p class="m-0">This is step text</p>
                                        </a></li>
                                    <li><a href="#step-4">
                                            <h6>Step 4</h6>
                                            <p class="m-0">This is step content</p>
                                        </a></li>
                                </ul>
                                <div>
                                    <div id="step-1">
                                        <h5>Title Step 1</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                    <div id="step-2">
                                        <h5>Title Step 2</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                    <div id="step-3">
                                        <h5>Title Step 3</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                    <div id="step-4">
                                        <h5>Title Step 4</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                $('#smartwizard').smartWizard({
                                    theme: 'default',
                                    transitionEffect: 'fade',
                                    autoAdjustHeight: false,
                                    useURLhash: false,
                                    showStepURLhash: false
                                });
                            }, 700);
                            $("#theme_selector").on("change", function() {
                                $('#smartwizard').smartWizard("theme", $(this).val());
                                return true;
                            });
                            $('#smartwizard .sw-toolbar').appendTo($('#smartwizard .sw-container'));
                            $("#theme_selector").change();
                        });
                    </script>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Smart Wizard [ Vertical Left ]</h5>
                        </div>
                        <div class="card-block">
                            <div id="smartwizard-left" class="sw-vertical-left">
                                <ul>
                                    <li><a href="#step-l-1">
                                            <h6>Step 1</h6>
                                            <p class="m-0">This is step description</p>
                                        </a></li>
                                    <li><a href="#step-l-2">
                                            <h6>Step 2</h6>
                                            <p class="m-0">This is step content</p>
                                        </a></li>
                                    <li><a href="#step-l-3">
                                            <h6>Step 3</h6>
                                            <p class="m-0">This is step text</p>
                                        </a></li>
                                    <li><a href="#step-l-4">
                                            <h6>Step 4</h6>
                                            <p class="m-0">This is step content</p>
                                        </a></li>
                                </ul>
                                <div>
                                    <div id="step-l-1">
                                        <h5>Title Step 1</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                    <div id="step-l-2">
                                        <h5>Title Step 2</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                    <div id="step-l-3">
                                        <h5>Title Step 3</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                    <div id="step-l-4">
                                        <h5>Title Step 4</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                $('#smartwizard-left').smartWizard({
                                    theme: 'default',
                                    transitionEffect: 'fade',
                                    showStepURLhash: true,
                                    autoAdjustHeight: false,
                                    useURLhash: false,
                                    showStepURLhash: false
                                });
                                $('#smartwizard-left .sw-toolbar').appendTo($('#smartwizard-left .sw-container'));
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Smart Wizard [ Vertical Right ]</h5>
                        </div>
                        <div class="card-block">
                            <div id="smartwizard-right" class="sw-vertical-right">
                                <div>
                                    <div id="step-r-1">
                                        <h5>Title Step 1</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                    <div id="step-r-2">
                                        <h5>Title Step 2</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                    <div id="step-r-3">
                                        <h5>Title Step 3</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                    <div id="step-r-4">
                                        <h5>Title Step 4</h5>
                                        <hr>
                                        <h6>Sub title 1</h6>
                                        <p><strong>@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                            standard dummy text.</p>
                                        <h6 class="mt-3">Sub title 2</h6>
                                        <p><strong>@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                </div>
                                <ul>
                                    <li><a href="#step-r-1">
                                            <h6>Step 1</h6>
                                            <p class="m-0">This is step description</p>
                                        </a></li>
                                    <li><a href="#step-r-2">
                                            <h6>Step 2</h6>
                                            <p class="m-0">This is step content</p>
                                        </a></li>
                                    <li><a href="#step-r-3">
                                            <h6>Step 3</h6>
                                            <p class="m-0">This is step text</p>
                                        </a></li>
                                    <li><a href="#step-r-4">
                                            <h6>Step 4</h6>
                                            <p class="m-0">This is step content</p>
                                        </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        setTimeout(function() {
                            $('#smartwizard-right').smartWizard({
                                theme: 'default',
                                transitionEffect: 'fade',
                                showStepURLhash: true,
                                autoAdjustHeight: false,
                                useURLhash: false,
                                showStepURLhash: false
                            });
                            $('#smartwizard-right .sw-toolbar').appendTo($('#smartwizard-right .sw-container'));
                        }, 700);
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Smart Wizard css --&gt;
                    &lt;link href="assets/plugins/smart-wizard/css/smart_wizard.min.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/smart-wizard/css/smart_wizard_theme_arrows.min.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/smart-wizard/css/smart_wizard_theme_circles.min" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/smart-wizard/css/smart_wizard_theme_dots.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Smart Wizard Js --&gt;
                    &lt;script src="assets/plugins/wizard/js/jquery.bootstrap.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/smart-wizard/js/jquery.smartWizard.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-datepicker">Datepicker</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Material Datetimepicker</h5>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-md-4 m-b-30">
                                    <h5>Date Picker</h5>
                                    <hr>
                                    <input type="text" id="date" class="form-control" placeholder="Date">
                                </div>
                                <div class="col-md-4 m-b-30">
                                    <h5>Time Picker</h5>
                                    <hr>
                                    <input type="text" id="time" class="form-control" placeholder="Time">
                                </div>
                                <div class="col-md-4 m-b-30">
                                    <h5>Date Time Picker</h5>
                                    <hr>
                                    <input type="text" id="date-format" class="form-control" placeholder="Begin Date Time">
                                </div>
                                <div class="col-md-6 m-b-30">
                                    <h5>French Locales (Week starts at Monday)</h5>
                                    <hr>
                                    <input type="text" id="date-fr" class="form-control" value="18/03/2015 08:00" placeholder="Date de début">
                                </div>
                                <div class="col-md-6 m-b-30">
                                    <h5>Min Date set</h5>
                                    <hr>
                                    <input type="text" id="min-date" class="form-control" placeholder="Start Date">
                                </div>
                                <div class="col-md-12 m-b-30">
                                    <h5>Events</h5>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-6 mb-1">
                                            <input type="text" id="date-start" class="form-control" placeholder="Start Date">
                                        </div>
                                        <div class="col-sm-6 mb-1">
                                            <input type="text" id="date-end" class="form-control" placeholder="End Date">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $('#date').bootstrapMaterialDatePicker({
                                weekStart: 0,
                                time: false
                            });

                            $('#time').bootstrapMaterialDatePicker({
                                date: false,
                                format: 'HH:mm'
                            });

                            $('#date-format').bootstrapMaterialDatePicker({
                                format: 'dddd DD MMMM YYYY - HH:mm'
                            });

                            $('#date-fr').bootstrapMaterialDatePicker({
                                format: 'DD/MM/YYYY HH:mm',
                                lang: 'fr',
                                weekStart: 1,
                                cancelText: 'ANNULER'
                            });

                            $('#min-date').bootstrapMaterialDatePicker({
                                format: 'DD/MM/YYYY HH:mm',
                                minDate: new Date()
                            });

                            $('#date-end').bootstrapMaterialDatePicker({
                                weekStart: 0,
                                format: 'dddd DD MMMM YYYY - HH:mm'
                            });
                            $('#date-start').bootstrapMaterialDatePicker({
                                weekStart: 0,
                                format: 'dddd DD MMMM YYYY - HH:mm'
                            }).on('change', function(e, date) {
                                $('#date-end').bootstrapMaterialDatePicker('setMinDate', date);
                            });
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Material Datepicker css --&gt;
                    &lt;link href="assets/plugins/material-datetimepicker/css/bootstrap-material-datetimepicker.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Bootstrap Datepicker css --&gt;
                    &lt;link href="assets/plugins/bootstrap-datetimepicker/css/prettify.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/bootstrap-datetimepicker/css/docs.css" rel="stylesheet"&gt;
                    &lt;link href="assets/plugins/bootstrap-datetimepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"&gt;
                    &lt;link href="assets/fonts/material/css/materialdesignicons.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Material Datepicker Js --&gt;
                    &lt;script src="http://momentjs.com/downloads/moment-with-locales.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/material-datetimepicker/js/bootstrap-material-datetimepicker.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-colorpicker">Color picker</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Color Picker</h5>
                        </div>
                        <div class="card-block">
                            <h5>Control Types</h5>
                            <hr>
                            <div class="row">
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Hue (default)</h6>
                                    <input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161">
                                </div>
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Saturation</h6>
                                    <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc">
                                </div>
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Brightness</h6>
                                    <input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff">
                                </div>
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Wheel</h6>
                                    <input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee">
                                </div>
                            </div>
                            <h5 class="mt-4">Input Modes</h5>
                            <hr>
                            <div class="row">
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Text Field</h6>
                                    <input type="text" id="text-field" class="form-control demo" value="#70c24a">
                                </div>
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Hidden Input</h6>
                                    <input type="hidden" id="hidden-input" class="demo" value="#f4f7fa">
                                </div>
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Inline</h6>
                                    <input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db">
                                </div>
                            </div>
                            <h5>Positions</h5>
                            <p class="mb-0">Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top left</code>, and <code>top right</code>.</p>
                            <hr>
                            <div class="row">
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Bottom Left (default)</h6>
                                    <input type="text" id="position-bottom-left" class="form-control demo" data-position="bottom left" value="#0088cc">
                                </div>
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Top Left</h6>
                                    <input type="text" id="position-top-left" class="form-control demo" data-position="top left" value="#0088cc">
                                </div>
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Bottom Right</h6>
                                    <input type="text" id="position-bottom-right" class="form-control demo" data-position="bottom right" value="#0088cc">
                                </div>
                                <div class="col-xl-4 col-md-6 mb-3">
                                    <h6>Top Right</h6>
                                    <input type="text" id="position-top-right" class="form-control demo" data-position="top right" value="#0088cc">
                                </div>
                            </div>
                            <h5>RGB(A)</h5>
                            <hr>
                            <div class="row">
                                <div class="col-xl-4 col-md-6 mb-4">
                                    <h6>RGB</h6>
                                    <input type="text" id="rgb" class="form-control demo" data-format="rgb" value="rgb(33, 147, 58)">
                                    <span class="help-block mt-1 d-block">RGB input can be assigned by setting the <code>format</code> option to <code>rgb</code>.</span>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-4">
                                    <h6>RGBA</h6>
                                    <input type="text" id="rgba" class="form-control demo" data-format="rgb" data-opacity=".5" value="rgba(52, 64, 158, 0.5)">
                                    <span class="help-block mt-1 d-block">RGBA input can be assigned by setting the <code>format</code>option to <code>rgb</code> and <code>opacity</code> option to<code>true</code>.</span>
                                </div>
                            </div>
                            <h5>&hellip;And More!</h5>
                            <hr>
                            <div class="row">
                                <div class="col-xl-4 col-md-6 mb-4">
                                    <h6>Opacity</h6>
                                    <input type="text" id="opacity" class="form-control demo mb-1" data-opacity=".5" value="#766fa8">
                                    <span class="help-block">Opacity can be assigned by including the <code>data-opacity</code>attribute or by setting the <code>opacity</code> option to<code>true</code>.</span>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-4">
                                    <h6>Keywords</h6>
                                    <input type="text" id="keywords" class="form-control demo mb-1" data-keywords="transparent, initial, inherit" value="transparent">
                                    <span class="help-block">CSS-wide keywords can be assigned by setting the <code>keywords</code>option to a comma-separated list of valid keywords: <code>transparent,initial, inherit</code>.</span>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-4">
                                    <h6>Default Value</h6>
                                    <input type="text" id="default-value" class="form-control demo mb-1" data-defaultValue="#ff6600">
                                    <span class="help-block">This field has a default value assigned to it, so it will never be empty.</span>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-4">
                                    <h6>Letter Case</h6>
                                    <input type="text" id="letter-case" class="form-control demo mb-1" data-letterCase="uppercase" value="#abcdef">
                                    <span class="help-block">This field will always be uppercase.</span>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-4">
                                    <h6>Input Groups</h6>
                                    <div class="input-group">
                                        <input type="text" id="input-group" class="form-control demo" value="#ff0000" />
                                    </div>
                                    <span class="help-block mt-1 d-block">Example using Bootstrap's input groups.</span>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-4">
                                    <h6 class="input-group-addon">Color</h6>
                                    <input type="text" id="more-input-group" class="form-control demo mb-1" value="#1a5ef0" />
                                    <span class="help-block">Input group example with addon.</span>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-4">
                                    <h6>Swatches</h6>
                                    <div class="form-group">
                                        <input type="text" id="swatches" class="form-control demo mb-1" data-swatches="#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e" value="#abcdef">
                                        <span class="help-block">Example with swatches.</span>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-md-6 mb-4">
                                    <h6>Swatches and Opacity</h6>
                                    <div class="form-group">
                                        <input type="text" id="swatchesandop" class="form-control demo mb-1" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)" value="rgba(14, 206, 235, .5)">
                                        <span class="help-block">Example with swatches and opacity.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    $(document).ready(function() {
                        $('.demo').each(function() {
                            $(this).minicolors({
                                control: $(this).attr('data-control') || 'hue',
                                defaultValue: $(this).attr('data-defaultValue') || '',
                                format: $(this).attr('data-format') || 'hex',
                                keywords: $(this).attr('data-keywords') || '',
                                inline: $(this).attr('data-inline') === 'true',
                                letterCase: $(this).attr('data-letterCase') || 'lowercase',
                                opacity: $(this).attr('data-opacity'),
                                position: $(this).attr('data-position') || 'bottom',
                                swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
                                change: function(value, opacity) {
                                    if (!value) return;
                                    if (opacity) value += ', ' + opacity;
                                    if (typeof console === 'object') {
                                        console.log(value);
                                    }
                                },
                                theme: 'bootstrap'
                            });
                        });
                    });
                </script>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Minicolors css --&gt;
                    &lt;link href="assets/plugins/mini-color/css/jquery.minicolors.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Minicolors Js --&gt;
                    &lt;script src="assets/plugins/mini-color/js/jquery.minicolors.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-select">Select</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card select-card">
                        <div class="card-header">
                            <h5>Select2</h5>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Single Select</h5>
                                    <hr>
                                    <p>The<code>select2</code> can take a regular select box like this...</p>
                                    <select class="js-example-basic-single form-control">
                                        <optgroup label="Developer">
                                            <option value="AL">Alabama</option>
                                            <option value="WY">Wyoming</option>
                                        </optgroup>
                                        <optgroup label="Designer">
                                            <option value="WY">Peter</option>
                                            <option value="WY">Hanry Die</option>
                                            <option value="WY">John Doe</option>
                                        </optgroup>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Multi Select</h5>
                                    <hr>
                                    <p>The select below is declared with the<code>multiple</code> attribute</p>
                                    <select class="js-example-basic-multiple col-sm-12" multiple="multiple">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                        <option value="WY">Coming</option>
                                        <option value="WY">Hanry Die</option>
                                        <option value="WY">John Doe</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>With Placeholder</h5>
                                    <hr>
                                    <p><code>select2</code> uses the <code>placeholder</code> attribute on multiple select boxes</p>
                                    <select class="js-example-placeholder-multiple col-sm-12">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                        <option value="WY">Coming</option>
                                        <option value="WY">Hanry Die</option>
                                        <option value="WY">John Doe</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Tagging Support</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-example-tags</code></p>
                                    <select class="js-example-tags col-sm-12" multiple="multiple">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                        <option value="WY">Coming</option>
                                        <option value="WY">Hanry Die</option>
                                        <option value="WY">John Doe</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Automatic Tokenization</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-example-tokenizer</code></p>
                                    <select class="js-example-tokenizer col-sm-12" multiple="multiple">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                        <option value="WY">Coming</option>
                                        <option value="WY">Hanry Die</option>
                                        <option value="WY">John Doe</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>RTL Support</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-example-rtl</code></p>
                                    <select class="js-example-rtl col-sm-12" multiple="multiple">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                        <option value="WY">Coming</option>
                                        <option value="WY">Hanry Die</option>
                                        <option value="WY">John Doe</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Limiting The Number Of Selections</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-example-basic-multiple-limit</code></p>
                                    <select class="js-example-basic-multiple-limit col-sm-12" multiple="multiple">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                        <option value="WY">Coming</option>
                                        <option value="WY">Hanry Die</option>
                                        <option value="WY">John Doe</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Diacritics Support</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-example-diacritics</code></p>
                                    <select class="js-example-diacritics col-sm-12" multiple="multiple">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                        <option value="WY">Coming</option>
                                        <option value="WY">Hanry Die</option>
                                        <option value="WY">John Doe</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Responsive Width</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-example-responsive</code></p>
                                    <select class="js-example-responsive col-sm-12" multiple="multiple" style="width:75%;">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                        <option value="WY">Coming</option>
                                        <option value="WY">Hanry Die</option>
                                        <option value="WY">John Doe</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Loading With Array</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-example-data-array</code></p>
                                    <select class="js-example-data-array col-sm-12"></select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Load Remote Data ( Ajax )</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-data-example-ajax</code>
                                    </p>
                                    <select class="js-data-example-ajax col-sm-12">
                                        <option value="3620194" selected="selected">select2</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Disabled Results</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-example-disabled-results</code></p>
                                    <select class="js-example-disabled-results col-sm-12">
                                        <option value="one">First</option>
                                        <option value="two" disabled="disabled">Second (disabled)
                                        </option>
                                        <option value="three">Third</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5 class="sub-title">Hiding The Search Box</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-example-basic-hide-search</code></p>
                                    <select class="js-example-basic-hide-search col-sm-12" multiple="multiple" style="width: 75%">
                                        <optgroup label="Developer">
                                            <option value="AL">Smith</option>
                                            <option value="WY">Peter</option>
                                            <option value="WY">James</option>
                                            <option value="WY">Hanry Die</option>
                                            <option value="WY">John Doe</option>
                                            <option value="WY">Harry Poter</option>
                                        </optgroup>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6  mb-5">
                                    <h5>Enable-Disable</h5>
                                    <hr>
                                    <p>The select below is declared with the class<code>.js-example-disabled</code></p>
                                    <select class="js-example-disabled col-sm-8">
                                        <option value="AL">Smith</option>
                                        <option value="WY">Peter</option>
                                        <option value="WY">James</option>
                                        <option value="WY">Hanry Die</option>
                                        <option value="WY">John Doe</option>
                                        <option value="WY">Harry Poter</option>
                                    </select>
                                    <button class="btn btn-success m-t-20 m-b-20 m-l-10   js-programmatic-enable">Enable</button>
                                    <button class="btn btn-danger m-t-20 m-b-20 m-l-10   js-programmatic-disable">Disable</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            // [ Single Select ] start
                            $(".js-example-basic-single").select2();

                            // [ Multi Select ] start
                            $(".js-example-basic-multiple").select2();

                            // [ With Placeholder ] start
                            $(".js-example-placeholder-multiple").select2({
                                placeholder: "Select Your Name"
                            });

                            // [ Tagging Support ] start
                            $(".js-example-tags").select2({
                                tags: true
                            });

                            // [ Automatic Select ] start
                            $(".js-example-tokenizer").select2({
                                tags: true,
                                tokenSeparators: [',', ' ']
                            });

                            // [ RTL Support ] start
                            $(".js-example-rtl").select2({
                                dir: "rtl"
                            });

                            // [ limiting selection ] start
                            $(".js-example-basic-multiple-limit").select2({
                                maximumSelectionLength: 2
                            });

                            // [ diacritics select ] start
                            $(".js-example-diacritics").select2();

                            // [ Responsive select ] start
                            $(".js-example-responsive").select2();

                            // [ loading array ] start
                            var data = [{
                                id: 0,
                                text: 'enhancement'
                            }, {
                                id: 1,
                                text: 'bug'
                            }, {
                                id: 2,
                                text: 'duplicate'
                            }, {
                                id: 3,
                                text: 'invalid'
                            }, {
                                id: 4,
                                text: 'wontfix'
                            }];
                            $(".js-example-data-array").select2({
                                data: data
                            });

                            // [ loading data ] start
                            function formatRepo(repo) {
                                if (repo.loading) return repo.text;

                                var markup = "<div class='select2-result-repository clearfix'>" +
                                    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
                                    "<div class='select2-result-repository__meta'>" +
                                    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

                                if (repo.description) {
                                    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
                                }

                                markup += "<div class='select2-result-repository__statistics'>" +
                                    "<div class='select2-result-repository__forks'><i class='icofont icofont-flash'></i> " + repo.forks_count + " Forks</div>" +
                                    "<div class='select2-result-repository__stargazers'><i class='icofont icofont-star'></i> " + repo.stargazers_count + " Stars</div>" +
                                    "<div class='select2-result-repository__watchers'><i class='icofont icofont-eye-alt'></i> " + repo.watchers_count + " Watchers</div>" +
                                    "</div>" +
                                    "</div></div>";

                                return markup;
                            }

                            function formatRepoSelection(repo) {
                                return repo.full_name || repo.text;
                            }
                            $(".js-data-example-ajax").select2({
                                ajax: {
                                    url: "https://api.github.com/search/repositories",
                                    dataType: 'json',
                                    delay: 250,
                                    data: function(params) {
                                        return {
                                            q: params.term, // search term
                                            page: params.page
                                        };
                                    },
                                    processResults: function(data, params) {
                                        params.page = params.page || 1;

                                        return {
                                            results: data.items,
                                            pagination: {
                                                more: (params.page * 30) < data.total_count
                                            }
                                        };
                                    },
                                    cache: true
                                },
                                escapeMarkup: function(markup) {
                                    return markup;
                                }, // let our custom formatter work
                                minimumInputLength: 1,
                                templateResult: formatRepo, // omitted for brevity, see the source of this page
                                templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
                            });

                            // [ disable result ] start
                            $(".js-example-disabled-results").select2();

                            // [ hide search ] start
                            $(".js-example-basic-hide-search").select2({
                                minimumResultsForSearch: Infinity
                            });

                            // [ enable disable ] start
                            $(".js-example-disabled").select2({
                                disabled: false
                            });
                            $(".js-programmatic-enable").on("click", function() {
                                $(".js-example-disabled").prop("disabled", false);
                            });
                            $(".js-programmatic-disable").on("click", function() {
                                $(".js-example-disabled").prop("disabled", true);
                            });
                        });
                    </script>
                </div>

            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Select2 css --&gt;
                    &lt;link href="assets/plugins/select2/css/select2.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Select2 Js --&gt;
                    &lt;script src="assets/plugins/select2/js/select2.full.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-multiselect">Multi select</h2>
            <div class="row">
                <div class="col-sm-12 datta-example">
                    <div class="card select-card">
                        <div class="card-header">
                            <h5>multi select</h5>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Pre-Selected Options</h5>
                                    <hr>
                                    <select multiple="multiple" id="my-select" name="my-select[]">
                                        <option value='elem_1' selected="">elem 1</option>
                                        <option value='elem_2'>elem 2</option>
                                        <option value='elem_3'>elem 3</option>
                                        <option value='elem_4'>elem 4</option>
                                        <option value='elem_5'>elem 5</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Custom Headers And Footers</h5>
                                    <hr>
                                    <select id='custom-headers1' multiple='multiple'>
                                        <option value='elem_1'>elem 1</option>
                                        <option value='elem_2'>elem 2</option>
                                        <option value='elem_3'>elem 3</option>
                                        <option value='elem_4'>elem 4</option>
                                        <option value='elem_5'>elem 5</option>
                                        <option value='elem_6'>elem 6</option>
                                        <option value='elem_7'>elem 7</option>
                                        <option value='elem_8'>elem 8</option>
                                        <option value='elem_9'>elem 9</option>
                                        <option value='elem_10'>elem 10</option>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6 mb-5">
                                    <h5>Optgroup</h5>
                                    <hr>
                                    <select id='optgroup' multiple='multiple'>
                                        <optgroup label='Friends'>
                                            <option value='1'>Yoda</option>
                                            <option value='2' selected>Obiwan</option>
                                        </optgroup>
                                        <optgroup label='Enemies'>
                                            <option value='3'>Palpatine</option>
                                            <option value='4' disabled>Darth Vader</option>
                                        </optgroup>
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-12 mb-5">
                                    <h5>Searchable</h5>
                                    <hr>
                                    <select id='custom-headers' class="searchable" multiple='multiple'>
                                        <option value='elem_1' selected>elem 1</option>
                                        <option value='elem_2'>elem 2</option>
                                        <option value='elem_3'>elem 3</option>
                                        <option value='elem_4' selected>elem 4</option>
                                        <option value='elem_5'>elem 5</option>
                                        <option value='elem_6'>elem 6</option>
                                        <option value='elem_7'>elem 7</option>
                                        <option value='elem_8'>elem 8</option>
                                        <option value='elem_9'>elem 9</option>
                                        <option value='elem_10'>elem 10</option>
                                        <option value='elem_11'>elem 11</option>
                                        <option value='elem_12'>elem 12</option>
                                        <option value='elem_13'>elem 13</option>
                                        <option value='elem_14'>elem 14</option>
                                        <option value='elem_15'>elem 15</option>
                                        <option value='elem_16'>elem 16</option>
                                    </select>
                                </div>

                                <div class="col-xl-8 col-md-12 mb-5">
                                    <h5>Public Methods</h5>
                                    <hr>
                                    <button type="button" class="btn btn-primary   m-b-10" id='select-all'>select all</button>
                                    <button type="button" class="btn btn-primary   m-b-10" id='deselect-all'>deselect all</button>
                                    <button type="button" class="btn btn-primary   m-b-10" id='select-5'>select 5 elems</button>
                                    <button type="button" class="btn btn-primary   m-b-10" id='deselect-5'>deselect 5 elems</button>
                                    <select id='public-methods' multiple='multiple'>
                                        <option value='elem_1'>elem 1</option>
                                        <option value='elem_2' disabled>elem 2</option>
                                        <option value='elem_3'>elem 3</option>
                                        <option value='elem_4'>elem 4</option>
                                        <option value='elem_5'>elem 5</option>
                                        <option value='elem_6'>elem 6</option>
                                        <option value='elem_7'>elem 7</option>
                                        <option value='elem_8'>elem 8</option>
                                        <option value='elem_9'>elem 9</option>
                                        <option value='elem_10'>elem 10</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            // [ pre select ] start
                            $('#my-select').multiSelect();

                            // [ custom header-footer ] start
                            $('#custom-headers1').multiSelect({
                                selectableHeader: "<div class='custom-header'>Selectable items</div>",
                                selectionHeader: "<div class='custom-header'>Selection items</div>",
                                selectableFooter: "<div class='custom-header'>Selectable footer</div>",
                                selectionFooter: "<div class='custom-header'>Selection footer</div>"
                            });

                            // [ Optgroup ] start
                            $('#optgroup').multiSelect({
                                selectableOptgroup: true
                            });

                            // [ Searchable ] start
                            $('.searchable').multiSelect({
                                selectableHeader: "<input type='text' class='form-control' autocomplete='off' placeholder='try \"12\"'>",
                                selectionHeader: "<input type='text' class='form-control' autocomplete='off' placeholder='try \"4\"'>",
                                afterInit: function(ms) {
                                    var that = this,
                                        $selectableSearch = that.$selectableUl.prev(),
                                        $selectionSearch = that.$selectionUl.prev(),
                                        selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                                        selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

                                    that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                                        .on('keydown', function(e) {
                                            if (e.which === 40) {
                                                that.$selectableUl.focus();
                                                return false;
                                            }
                                        });

                                    that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                                        .on('keydown', function(e) {
                                            if (e.which == 40) {
                                                that.$selectionUl.focus();
                                                return false;
                                            }
                                        });
                                },
                                afterSelect: function() {
                                    this.qs1.cache();
                                    this.qs2.cache();
                                },
                                afterDeselect: function() {
                                    this.qs1.cache();
                                    this.qs2.cache();
                                }
                            });

                            // [ public methods ] start
                            $('#public-methods').multiSelect();
                            $('#select-all').on('click', function() {
                                $('#public-methods').multiSelect('select_all');
                                return false;
                            });
                            $('#deselect-all').on('click', function() {
                                $('#public-methods').multiSelect('deselect_all');
                                return false;
                            });
                            $('#select-5').on('click', function() {
                                $('#public-methods').multiSelect('select', ['elem_1', 'elem_3', 'elem_4', 'elem_5']);
                                return false;
                            });
                            $('#deselect-5').on('click', function() {
                                $('#public-methods').multiSelect('deselect', ['elem_1', 'elem_3', 'elem_4', 'elem_5']);
                                return false;
                            });
                            $('#refresh').on('click', function() {
                                $('#public-methods').multiSelect('refresh');
                                return false;
                            });
                            $('#add-option').on('click', function() {
                                $('#public-methods').multiSelect('addOption', {
                                    value: 42,
                                    text: 'test 42',
                                    index: 0
                                });
                                return false;
                            });
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Multi select css --&gt;
                    &lt;link href="assets/plugins/multi-select/css/multi-select.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Multi select Js --&gt;
                    &lt;script src="assets/plugins/multi-select/js/jquery.quicksearch.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/multi-select/js/jquery.multi-select.js"&gt;&lt;/script&gt;
                </code>
            </pre>
        </div>
    </div>

    <div class="datta-example-modal">
        <a href="javascript:void(0)" class="md-datta-example-modal-copy">
            <span class="feather icon-clipboard"></span>
        </a>
        <a href="javascript:void(0)" class="datta-example-modal-close">&times;</a>
        <div class="scroll-div">
            <div class="datta-example-modal-content"></div>
        </div>
    </div>

    <script src="assets/js/pcoded.min.js"></script>
    <script src="assets/js/uikit.min.js"></script>

    <script>
        $(function() {
            $('body').scrollspy({
                target: ".docs-sections-inner"
            });
            $(document).on('scroll', function() {
                var top = $(document).scrollTop();
                var left = $(document).scrollLeft();
                $('.docs-sections')[0].style.top = (top > 70 ? 0 : 70 - top) + 'px';
                $('.docs-sections')[0].style.left = (left * -1) + 'px';
            });
            $(document).ready(function() {
                var top = $(document).scrollTop();
                var left = $(document).scrollLeft();
                $('.docs-sections')[0].style.top = (top > 70 ? 0 : 70 - top) + 'px';
                $('.docs-sections')[0].style.left = (left * -1) + 'px';
            });

            $(".docs-sections-inner a").on('click', function(event) {
                if (this.hash !== "") {
                    event.preventDefault();
                    var hash = this.hash;
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top
                    }, 1500, function() {
                        window.location.hash = hash;
                    });
                }
            });

        });
    </script>

</body>
</html>
